1、變量聲明

$nav-color: #F90; nav {//$width 變量的作用域僅限于{}內$width: 100px;width: $width;color: $nav-color; }.a {//報錯，$width未定義width: $width; }

2、父選擇器&

scss代碼：

article a {color: blue;&:hover { color: red } }

編譯后為：

article a {color: blue; }article a:hover {color: red; }

父選擇器的另外一個用途，可以在父選擇器之前添加選擇器，如處理IE的hack，在html或者body上添加ie class。

示例代碼：

#content aside {color: red;body.ie & { color: green } }

編譯后為：

#content aside {color: red; }body.ie #content aside {color: green; }

3、群組選擇器

.container {h1, h2, h3 {margin-bottom: .8em} }

編譯后：

.container h1, .container h2, .container h3 {margin-bottom: .8em; }

?

也可以這樣：

nav, aside {a {color: blue} }

編譯后：

nav a, aside a {color: blue; }

4、>、+和~選擇器

article {~ article { border-top: 1px dashed #ccc }> section { background: #eee }dl > {dt { color: #333 }dd { color: #555 }}nav + & { margin-top: 0 } }

編譯后為：

article ~ article {border-top: 1px dashed #ccc; }article > section {background: #eee; }article dl > dt {color: #333; }article dl > dd {color: #555; }nav + article {margin-top: 0; }

5、SCSS局文件

sass局部文件的文件名以下劃線開頭。

目的：

sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用作導入。

?

說明：

（1）使用sass的@import規則并不需要指明被導入文件的全名。你可以省略.sass或.scss文件后綴。

（2）當你@import一個局部文件時，還可以不寫文件的全名，即省略文件名開頭的下劃線。

（3）不可以同時存在添加下劃線與未添加下劃線的同名文件，添加下劃線的文件將會被忽略。

?

6、混合器

混合器定義：

@mixin rounded-corners {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }

使用混合器：

notice {background-color: green;border: 2px solid #00aa00;@include rounded-corners; }

編譯后為：

notice {background-color: green;border: 2px solid #00aa00;border-radius: 5px; }

2個關鍵字：@mixin和@include

?

混合器傳參：

@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; } }

使用：

a {@include link-colors(blue, red, green); }

編譯后為：

a {color: blue; }a:hover {color: red; }a:visited {color: green; }

混合器主要用于展示性樣式的重用

7、選擇器繼承

.error {border: 1px red;background-color: #fdd; } .seriousError {@extend .error;border-width: 3px; }

編譯后為：

.error, .seriousError {border: 1px red;background-color: #fdd; }.seriousError {border-width: 3px; }

繼承是建立在語義化的關聯。

?

Sass 允許延伸任何定義給單個元素的選擇器：

.error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; }

編譯后為：

.error, .seriousError {border: 1px #f00;background-color: #fdd; }.error.intrusion, .intrusion.seriousError {background-image: url("/image/hacked.png"); }.seriousError {border-width: 3px; }

?

8、@media 媒體查詢

.sidebar {width: 300px;@media screen and (orientation: landscape) {width: 500px;} }

編譯后：

.sidebar {width: 300px; }@media screen and (orientation: landscape) {.sidebar {width: 500px;} }

注意：@media?將被編譯到文件的最外層。

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的SCSS 实用知识汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

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