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); }