SCSS便是SASS的新語法,是Sassy CSS的簡寫,是CSS3語法的超集,也就是說全部有效的CSS3樣式也一樣適合於SASS。框架
SASS是CSS3的一個擴展,增長了規則嵌套、變量、混合、選擇器繼承等等。經過使用命令行的工具或WEB框架插件把它轉換成標準的、格式良好的CSS代碼。ide
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 {spa
text-align: right;插件
}命令行
}code
li {blog
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); }