К содержанию

LESS-da saýlawçylaryň içindäki üýtgeýänler

Üýtgeýänleri saýlawçylaryň içinde hem ulanyp bolýar. Emma bunuň üçin üýtgeýäni goýmagyň başga bir sintaksisinden peýdalanylmagy gerek: @ nyşanyndan soň üýtgeýäniň ady ýaýly möýňür içine alynmaly. Mysallara seredeliň. Bizde aşakdaky ýaly üýtgeýän bardyr:

styles.less@var: div;

Geliň bu üýtgeýäni saýlawçyň içine goýalyň. Dürli ýagdaýlary gözden geçireýliň.

Mysal

Üýtgeýänimizi saýlawçy hökmünde goýalyň:

styles.less@{var} {
  font-size: 20px;
}

Kompilirleme netijesi:

styles.cssdiv {
  font-size: 20px;
}

Mysal

Indi üýtgeýänimiz saýlawçynyň bir bölegini öz içine alsyn:

styles.lessmain @{var} {
  font-size: 20px;
}

Kompilirleme netijesi:

styles.cssmain div {
  font-size: 20px;
}

Mysal

Indi bizde üýtgeýändä tegiň ady däl, eýsem onuň id-si bardyr diýeliň. Üýtgeýäniň adyndan öň reşetka goýalyň:

styles.less#@{var} {
  font-size: 20px;
}

Kompilirleme netijesi:

styles.css#div {
  font-size: 20px;
}

Mysal

Indi bizde üýtgeýändä tegiň ady däl, eýsem onuň klassy bardyr diýeliň. Üýtgeýäniň adyndan öň nokat goýalyň:

styles.less.@{var} {
  font-size: 20px;
}

Kompilirleme netijesi:

styles.css.div {
  font-size: 20px;
}

Amaly meseleler

Задание 1

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

Aşakdaky kodyň kompilirleme netijesi näme bolar, düşündiriň:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}