Вложения

В CSS несколько селекторов построены на вложениях элементов в друг друга. Например, вложенный селектор header h1 означает, что стиль следует применить к элементу <h1> который располагается внутри элемента <header>. При этом глубина вложения не играет роли. Также такой стиль не будет применяться ко всем другим элементам <h1> за пределами <header>. В CSS такие правила описываются следующим образом.

.block {
  width: 200px;
}
.block h2 {
  border-bottom: 1px solid red;
}
.block .content {
  padding-left: 10px;
}

Sass делает написание таких команд более компактным и наглядным за счёт вложения.

.block {
  width: 200px;
  h2 {
    border-bottom: 1px solid red;
  }
  .content {
    padding-left: 10px;
  }
}

Таким образом, мы просто пишем контекстные селекторы внутри фигурных скобок родительского селектора.

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

label {
  width: 32px;
  height: 26px;
  display: block;
  position: relative;
}
input[type="checkbox"] {
  + span {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: url(images/switch.png) no-repeat;
    cursor: pointer;
  }
}
input[type="checkbox"]:checked {
  + span {
    background-position: 0 -26px; 
  }
}

На выходе мы получим следующий стиль.

label {
  width: 32px;
  height: 26px;
  display: block;
  position: relative;
}

input[type="checkbox"] + span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(images/switch.png) no-repeat;
  cursor: pointer;
}

input[type="checkbox"]:checked + span {
  background-position: 0 -26px;
}

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

input {
  &::-webkit-input-placeholder {
    color: red;
  }
  &::-moz-placeholder {
    color: red;
  }
  &:-ms-input-placeholder {
    color: red;
  }
}

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

input::-webkit-input-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}