SCSS是什么

SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

 例如：

 ———————————

 在SCSS中使用变量

 ———————————

 $blue: #3bbfce;

 $margin: 16px;

 .content-navigation {

 border-color: $blue;

 color:

 darken($blue, %);

 }

 .border {

 padding: $margin / ;

 margin: $margin / ;

 border-color: $blue;

 }

 转换成CSS如下：

 /* CSS */

 .content-navigation {

 border-color: #3bbfce;

 color: #2b9eab;

 }

 .border {

 padding: 8px;

 margin: 8px;

 border-color: #3bbfce;

 }

嵌套

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;

}

 基本用法

  变量

 SASS允许使用变量，所有变量以$开头。

     $blue : #1875e7;

     div {
     color : $blue;
     }

 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

     $side : left;

     .rounded {
     border-#{$side}-radius: 5px;
     }

  计算功能

 SASS允许在代码中使用算式：

     body {
     margin: (14px/);
     top: 50px + 100px;
     right: $var * %;
     }

  嵌套

 SASS允许选择器嵌套。比如，下面的CSS代码：

     div h1 {
     color : red;
     }

 可以写成：

     div {
     hi {
     color:red;
     }
     }

 属性也可以嵌套，比如border-color属性，可以写成：

     p {
     border: {
     color: red;
     }
     }

 注意，border后面必须加上冒号。

 在嵌套的代码块内，可以使用$引用父元素。比如a:hover伪类，可以写成：

     a {
     &:hover { color: #ffb3ff; }
     }

  注释

 SASS共有两种注释风格。

 标准的CSS注释 /* comment */ ，会保留到编译后的文件。

 单行注释 // comment，只保留在SASS源文件中，编译后被省略。

 在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

     /*!
     重要注释！
     */

自定义函数

@function double($n){
@return $n*2;
}
#sidebar{
width:double(5px);
}