Правила стиля

Правила стиля являются основой Sass, как и CSS. И они работают одинаково: вы выбираете, какие элементы следует стилизовать с помощью селектора, и объявляете свойства, которые влияют на внешний вид этих элементов.

SCSS Syntax

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

Влаженность permalinkВлаженность

Но Sass хочет облегчить вашу жизнь. Вместо того, чтобы повторять одни и те же селекторы снова и снова, вы можете написать правила одного стиля внутри другого. Sass автоматически объединит селектор внешнего правила с селектором внутреннего правила.

SCSS Syntax

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

⚠️ Внимание!

Вложенные правила очень полезны, но они также могут затруднить визуализацию того, сколько CSS вы на самом деле генерируете. Чем глубже вложенные правила, тем больше пропускной способности требуется для обслуживания вашего CSS и тем больше работы требуется браузеру для его рендеринга. Держите эти селекторы неглубокими!

Списки селекторов permalinkСписки селекторов

Вложенные правила хорошо подходят для обработки списков селекторов (то есть селекторов, разделенных запятыми). Каждый сложный селектор (те, что между запятыми) вкладывается отдельно, а затем они снова объединяются в список селекторов.

SCSS Syntax

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

Комбинаторы селекторов permalinkКомбинаторы селекторов

Вы можете вкладывать селекторы, которые также используют комбинаторы. Вы можете поместить комбинатор в конец внешнего селектора, в начало внутреннего селектора или даже отдельно между ними.

SCSS Syntax

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

Продвинутая вложенность permalinkПродвинутая вложенность

Если вы хотите сделать с вложенными правилами стиля нечто большее, чем просто объединить их по порядку с разделяющим их комбинатором потомков (то есть обычным пробелом), Sass прикроет вас. Подробнее смотрите в документации родительский селектор.

Интерполяция permalinkИнтерполяция

Вы можете использовать интерполяцию для вставки значений из выражений, таких как переменные и вызовы функций, в ваши селекторы. Это особенно полезно, когда вы пишете миксины, поскольку это позволяет вам создавать селекторы из параметров, передаваемых вашими пользователями.

SCSS Syntax

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭");

💡 Интересный факт:

Sass анализирует селекторы только после интерполяции. Это означает, что вы можете безопасно использовать интерполяцию для создания любой части селектора, не беспокоясь о том, что он не будет разбираться.

Вы можете комбинировать интерполяцию с родительским селектором &, [правилом @at-root]@at-root rule и функциями селектора, чтобы получить серьезные возможности при динамическом создании селекторов. Для получения дополнительной информации смотрите документацию по родительскому селектору.