Как вкладывать селекторы в Sass
Development | Комментировать запись
Sass позволяет легко вкладывать селекторы друг в друга и организовывать правила иерархически. При этом вложенные правила будут применяться только к тем элементам, которые соответствуют внешнему селектору. Давайте рассмотрим такой пример:
.main { background-color: antiquewhite; margin: 0 auto; img { max-width: 100%; transform: rotate(3deg); } p:first-child { font-size: 1.2em; span { background-color: burlywood; padding: 0.2em 0.4em; }
Вложение помогает не только избежать повторения родительских селекторов, но и упростить сложные CSS-макеты, в которых встречается большое количество селекторов.
После компиляции в CSS вышеприведенный код даст следующий результат:
.main { background-color: antiquewhite; margin: 0 auto; } .main img { max-width: 100%; transform: rotate(3deg); } .main p:first-child { font-size: 1.2em; } .main p:first-child span { background-color: burlywood; padding: 0.2em 0.4em; }
Свойства в одном пространстве имен
Часто свойства в Sass имеют одинаковый префикс (например, background-color, background-image, background-repeat, background-size). О таких свойствах говорят, что они находятся в рамках одного пространства имен. Sass позволяет вкладывать такие свойства.
Например, вы можете вложить свойства фона, это все свойства с префиксом background. Обратите внимание, после ключевого слова background используется двоеточие, как показано в примере:
background: { color: antiquewhite; image: url(images/gator.svg); repeat: repeat-x; size: 36px 48px; }
Все эти свойства появляются внутри правила background, что обозначено двумя фигурными скобками, в результате чего они будут начинаться с родительского селектора background.
Следовательно, этот код скомпилируется в следующий CSS:
background-color: antiquewhite; background-image: url(images/gator.svg); background-repeat: repeat-x; background-size: 36px 48px;
Примечание: Чрезмерное количество уровней вложения может стать причиной спутанного CSS, поэтому старайтесь свести их количество к минимуму.
Если вы хотите самостоятельно изучить Sass, больше полезной информации по этой и другим темам вы найдете в официальной документации.
Читайте также:
Tags: CSS, Sass