谈谈对sass的了解

Sass

Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。

为什么使用Sass？

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。
Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass是如何工作的？

浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用变量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

sass的使用

sass文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

sass的基本用法

变量

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

/*定义变量与值*/
$blue : #1875e7;　
/*使用变量*/
div {
　color : $blue;
}

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

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

计算用法

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

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

嵌套

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

div h1 {
　　　　color : red;
　　}
　　
可以写成：
div {
　hi {
　　　color:red;
　}
}

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

　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}
//注意，border后面必须加上冒号。

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

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

注释

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

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

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