Как вкладывать селекторы в Sass

Amber

1 год назад

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, больше полезной информации по этой и другим темам вы найдете в официальной документации.

Читайте также: