Sass
一、变量
把反复使用的css属性值 定义成变量，Sass 变量使用 $ 符号定义，变量包含：字符串、数字、颜色值、布尔值、列表、null 值。
$width: 100%; //变量定义
nav {
width: $width; //变量使用
height:100px;
}
Sass 变量的作用域只能在当前的层级上有效果。
$Color: red;
div {
$Color: green; // 局部作用域
color: $Color; //green
}
p {
color: $Color; //red
}
使用 !global 关键词来设置变量是全局的。
$Color: red;
div {
$Color: green !global; // 全局作用域
color: $Color; //green
}
p {
color: $Color; //green
}
二、嵌套规则与属性
1. 嵌套规则块：
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
2. 组合选择器:
> ： 子组合选择器,选择一个元素的直接子元素。
+ ：同层相邻组合选择器。
~ ：同层全体组合选择器。
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
/*编译后*/
article ~ article { border-top: 1px dashed #ccc }
article > section { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
3. 嵌套属性：
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
/* 编译后 */
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
三、导入Sass文件
@import 指令可以让我们导入其他文件等内容。
CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。
@import filename;
1. 使用SASS部分文件
当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。但是，在导入语句中我们不需要添加下划线。
_colors.scss //局部文件命名 @import "colors"; //局部文件使用
注意：请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。
2. 默认变量值
如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量。
$width: 400px !default;
.box {
width: $width;
}
在导入你的sass局部文件之前声明了一个$width变量，那么你的局部文件中对$width赋值400px的操作就无效。如果用户没有做这样的声明，则$width将默认为400px。
四、混入
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
// 定义混入
@mixin bold-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
// 使用混入
.usemixin{
@include bold-text;
background-color: green;
}
//编译
.usemixin{
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
//混入包含混入
@mixin mixins {
@include bold-text;
@include name;
}
混入传参：
/* 混入接收两个参数 */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // 调用混入，并传递两个参数
}
//混入默认值
@mixin bordered($color, $width:1px) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue); // 调用混入，并传递两个参数
}
//混入可变参数
@mixin box-shadow($shadows...) {
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
五、继承
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
.basic {
width:100px;
border: none;
text-align: center;
font-size: 16px;
height:40px;
line-height:40px;
}
.report {
@extend .basic;
background-color: red;
}
.submit {
@extend .basic;
background-color: green;
color: white;
}
//编译后
.basic, .report, .submit {
width:100px;
border: none;
text-align: center;
font-size: 16px;
height:40px;
line-height:40px;
}
.report {
background-color: red;
}
.submit {
background-color: green;
color: white;
}
