scss支持的嵌套css规则

如下例子：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

id为content的div下面，有两个子节点，article和aside，其中article子节点下面又包含两个子节点h1和p.

如果用纯粹的css来编写，我们得一次又一次地重复#content这种层级结果。

用scss：使用大括号来描述层级结构：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

使用scss不用重复维护#content的层级结构，而且scss源码可读性更好。编译之后：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

SCSS 和 SASS 的区别

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS.

SCSS 是 CSS 语法的扩展.

This means that every valid CSS stylesheet is a valid SCSS file with the same meaning.

因此,每个合法的CSS文件也都是合法的SCSS文件.

This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

.sass 扩展, 并不是SAP Spartacus里使用的scss. Sass 使用indentation(缩进), 而不是括号,来描述嵌套的selector, 使用newline来进行property分隔,而不是css里的分号, 使用sass扩展名,而不是scss.