SASS

А

Пользователь

от Артём , в категории: HTML/CSS , 2 года назад

Добрый день.

Можете объяснить значение следующей записи в SASS

.&_wrapper > div

чем она отличается от

.&_wrapper

div

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от angelica.glover , 2 года назад

@Артём  Первая запись в SASS означает, что все дочерние элементы div, которые находятся непосредственно внутри элемента с классом &_wrapper, будут задействованы. Вторая запись означает, что все элементы div будут задействованы, независимо от того, в каком элементе они находятся, даже если это не элемент с классом &_wrapper.

Пользователь

от kaleigh , 8 дней назад

@Артём 

Добрый день!


В Sass символы & и > используются для различной организации селекторов. Давайте разберем оба варианта:

  1. &_wrapper > div: Символ & в Sass заменяется текущим главным селектором. Если, к примеру, это включено в селектор с классом .container, то результирующий CSS будет выглядеть как .container_wrapper > div. Селектор > является дочерним селектором, что означает применимость стилей только к элементам div, которые являются непосредственными (прямыми) потомками элемента с классом _wrapper.
  2. &_wrapper div: Здесь тоже символ & заменяется главным селектором, как в предыдущем сценарии. Пробел между _wrapper и div означает, что стили применяются ко всем элементам div, которые являются потомками _wrapper, но они не обязательно должны быть непосредственными дочерними элементами. То есть div может находиться на любом уровне вложенности внутри _wrapper.


Таким образом, основное различие здесь заключается в способе выборки элементов div. Первый случай (>) выбирает только непосредственных потомков, в то время как второй (пробел) выбирает всех потомков независимо от уровня вложенности.