SCSS即是SASS的新語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合於SASS。
SASS是CSS3的一個擴展，增加了規則嵌套、變量、混合、選擇器繼承等等。通過使用命令行的工具或WEB框架插件把它轉換成標准的、格式良好的CSS代碼。
1 例如： 2 3 ——————————— 4 5 在SCSS中使用變量 6 7 ——————————— 8 9 $blue: #3bbfce; 10 11 $margin: 16px; 12 13 .content-navigation { 14 15 border-color: $blue; 16 17 color: 18 19 darken($blue, 9%); 20 21 } 22 23 .border { 24 25 padding: $margin / 2; 26 27 margin: $margin / 2; 28 29 border-color: $blue; 30 31 } 32 33 轉換成CSS如下： 34 35 /* CSS */ 36 37 .content-navigation { 38 39 border-color: #3bbfce; 40 41 color: #2b9eab; 42 43 } 44 45 .border { 46 47 padding: 8px; 48 49 margin: 8px; 50 51 border-color: #3bbfce; 52 53 }
嵌套
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
轉換成CSS如下：
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
1 基本用法 2 3 變量 4 5 SASS允許使用變量，所有變量以$開頭。 6 7 $blue : #1875e7; 8 9 div { 10 color : $blue; 11 } 12 13 如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。 14 15 $side : left; 16 17 .rounded { 18 border-#{$side}-radius: 5px; 19 } 20 21 計算功能 22 23 SASS允許在代碼中使用算式： 24 25 body { 26 margin: (14px/2); 27 top: 50px + 100px; 28 right: $var * 10%; 29 } 30 31 嵌套 32 33 SASS允許選擇器嵌套。比如，下面的CSS代碼： 34 35 div h1 { 36 color : red; 37 } 38 39 可以寫成： 40 41 div { 42 hi { 43 color:red; 44 } 45 } 46 47 屬性也可以嵌套，比如border-color屬性，可以寫成： 48 49 p { 50 border: { 51 color: red; 52 } 53 } 54 55 注意，border后面必須加上冒號。 56 57 在嵌套的代碼塊內，可以使用$引用父元素。比如a:hover偽類，可以寫成： 58 59 a { 60 &:hover { color: #ffb3ff; } 61 } 62 63 注釋 64 65 SASS共有兩種注釋風格。 66 67 標准的CSS注釋 /* comment */ ，會保留到編譯后的文件。 68 69 單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。 70 71 在/*后面加一個感嘆號，表示這是”重要注釋”。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明版權信息。 72 73 /*! 74 重要注釋！ 75 */
自定義函數
@function double($n){ @return $n*2; } #sidebar{ width:double(5px); }