如下例子：

#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.

總結

以上是生活随笔為你收集整理的scss支持的嵌套css规则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。