Вложенные правила

Sass позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам. Например:

scss
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

#main p
  color: #00ff00
  width: 97%

  .redbox
    background-color: #ff0000
    color: #000000
css
#main p {
  color: #00ff00;
  width: 97%; 
}

#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

Это помогает избежать повторения родительских селекторов, и делает сложные CSS макеты с большим количеством вложенных селекторов гораздо проще. Например:

scss
#main {
  width: 97%;

  p, div {
    font-size: 2em;

    a {
      font-weight: bold;
    }
  }

  pre {
    font-size: 3em;
  }
}

#main
  width: 97%

  p, div
    font-size: 2em

    a
      font-weight: bold

  pre
    font-size: 3em
css
#main {
  width: 97%;
}

#main p, #main div {
    font-size: 2em;
}

#main p a, #main div a {
  font-weight: bold;
}

#main pre {
    font-size: 3em
}

Предыдущая страница

Расширение CSS

Следующая страница

Ссылка на родителя селектора

Ваша 
Поддержка