文章目录
前言：
Sass是CSS的扩展，为基本语言增添了更为强大的特性。
它允许您使用变量，嵌套规则，混合，内联导入等等，并提供sass,scss两种的语法选择，具有完全CSS兼容的语法。
语法：
1、变量
使用$定义变量，存储任何重复的代码，比如字体，颜色。
$font-stack: '宋体';
$base-color: #fff;
body
font: 100% $font-stack;
color: $base-color;
2、嵌套
当编写HTML时，你可能注意到它有一个清晰的嵌套和可视的层次结构。Sass允许你嵌套CSS选择器的方式遵循HTML的相同的视觉层次结构。
请注意，过度嵌套的规则将导致维护困难，通常被认为是不好的做法。
nav{
float: left
ul{
li{
margin: 0 auto;
width: auto;
list-style: none;
}
}
}
3、Import导入
CSS有一个导入选项，允许您将CSS拆分为更小，更容易维护的小文件。 唯一的缺点是每次在CSS中使用@import时，它会创建HTTP请求。 Sass构建CSS @import时，它不需要一个HTTP请求，Sass将接收您要导入的文件，并将其与您要导入的文件合并，以便可以将一个CSS文件提供给Web浏览器。
_reset.sass：
html, body{
margin: 0;
padding: 0;
}
base.sass：
@import reset; // 引入_reset.sass
4、Mixins
CSS中的一些东西有点乏味，特别是与CSS3和许多-webkit,-moz类似前缀存在，mixin允许您创建一组CSS声明，以便在整个网站中重复使用，你甚至可以传递值来使你的mixin更灵活，就像其它语言的函数一样，传递参数返回结果
=border-radius($radius)
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
=box-shadow($color)
-webkit-box-shadow: 10px 10px 5px $color;
-moz-box-shadow: 10px 10px 5px $color;
调用mixins
@import "mixins";
div{
+box-shadow(red);
}
等价于：
div {
-webkit-box-shadow: 10px 10px 5px red;
-moz-box-shadow: 10px 10px 5px red;
}
6、继承Extend/Inheritance
这是Sass最有用的功能之一,使用@extend可以将一组CSS属性从一个选择器共享到另一个。 它有助于保持你的Sass非常简洁，在下面的示例中，error，warning和success将会继承message
.message{
border: 1px solid #ccc;
color: #333;
}
.success{
@extend .message;
border-color: green;
}
.error{
@extend .message;
border-color: red;
}
等价于：
.message, .success, .error {
border: 1px solid #cccccc;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
7、Operators 操作符
在你的CSS中做数学是非常有帮助的，Sass有一些标准的数学运算符，如+， - ，*，/和％
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
8、引用父选择器&
使用嵌套规则的父选择器除默认值以外的其他方式是有用的。例如，你可能想要有一个特殊的样式，当选择器悬停在上面或当body元素有一个特定的类。 在这些情况下，您可以使用＆字符明确指定应插入父选择器的位置
a{
text-decoration: none;
&.hover{
text-decoration: blink；
}
}
9、Nested Properties嵌套属性
CSS有很多属性在“namespaces;”，例如font-family，font-size和font-weight都在字体命名空间。 在CSS中，如果你想在同一个命名空间中设置一堆属性，你必须每次都输入它。 Sass提供了一个快捷方式：只需写一次命名空间，然后嵌套其中的每个子属性。 例如：
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
10、Comments注释
/* 多行注释
* 多行注释
* 多行注释 */
// 单行注释
// 单行注释