Что означает `& # my-id` в CSS или SASS?
Я унаследовал некоторый код CSS, который использует символ & перед именем идентификатора для его стилизации. Выглядит это примерно так:
&#my-id {
// Content and attributes
}
Есть и другие примеры этого, например:
&:before {
// content and attributes
}
и
&:hover {
// content and attributes
}
Что это значит? Я не могу найти хороший способ выразить это в поиске, поэтому я ничего не могу найти. Приношу свои извинения, если это дубликат.
Ответы 2
Это относится к родительскому селектору.
Вход:
.parent {
&.child {
color: red;
}
}
Выход:
.parent.child { color: red }
Это действительно полезно, если вы пишете CSS в формате БЭМ, например:
.block {
&__element {
width: 100px;
height: 100px;
&--modifier {
width: 200px;
}
}
}
.block__element { width: 100px; height: 100px;}
.block__element--modifier { width: 200px;}
<div class = "block__element"></div>
<div class = "block__element block__element--modifier"></div>
И, наконец, во всех примерах, которыми я поделился, были объединены имена классов, но вы также можете использовать это как ссылку, например:
.parent {
& .child {
color: red;
}
}
.parent {
.child & {
color: blue;
}
}
.parent .child { color: red }
.child .parent { color: blue }
Дополнительные ссылки:
http://lesscss.org/features/#parent-selectors-feature
https://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/
Использование амперсанда (родительский селектор SASS) внутри вложенных селекторов
Это встроенная функция Sass: https://css-tricks.com/the-sass-ampersand/
Вы можете использовать его, когда вы вкладываете селекторы и вам нужен более конкретный селектор, например элемент, который имеет оба двух классов:
Если ваш CSS выглядит так:
.some-class.another-class { }
И вы хотели вложить, эквивалент Sass:
.some-class {
&.another-class {}
}
Обратите внимание, как они находятся внутри других блоков селектора. например.
#something { color:red; &:hover { color:blue; } }- это должно дать вам ключ к разгадке. При компиляции получается#something {color:red} #something:hover {color:blue}