Правила стилей

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

// SASS
.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

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

Вложение

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

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

  li { display: inline-block; }

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

// SASS
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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

/* CSS */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

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

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

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

// SASS
.alert, .warning
  ul, p
    margin-right: 0
    margin-left: 0
    padding-bottom: 0

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

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

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

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

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

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

// SASS
ul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8

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

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

p ~ span {
  opacity: 0.8;
}

Расширенное вложение

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

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

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

@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
@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", "👭")

/* CSS */
@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

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