css预处理器-sass
1.什么是sass
拥有变量，处理逻辑的css预处理器。简单的说就是将css以js的思维方式来写。sass文件的后缀名有两种：一个是sass，一个是scss。不同的后缀名，对应的语法也有所不同。
2.在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a { &:hover { color: #ffb3ff; } }
3.sass拥有变量
使用$符作为变量的前缀，格式：$变量名=值，例如：$defaultColor = '#ccc'
body{ color:$defaultColor } 等价于css: body{ color:"#ccc" }
作用：便于规范css样式处理
4. sass作用域
$defaultColor:"#ccc";
h1:{
$defaultColor:red,
color:$defaultColor;
}
p{
color:$defaultColor; // #ccc
}
总结：sass变量的作用域只在当前层级有效，也就是说只在大括号的范围内有效
5.改变sass作用域
$defaultColor:"#ccc";
h1:{
$defaultColor:red !global,//全局作用域
color:$defaultColor;
}
p{
color:$defaultColor; // red
}
总结：可以通过使用 !global 来将局部作用域设置为全局作用域
6. @mixin与@include
@mixin 指令用于定义一个可以在整个样式表中重复使用的样式
@include 指令可以将混入（mixin）引入到文档中
$defaultColor:"#fff";
@mixin default-style{
color:$defaultColor,
font-size:14px;
}
div{
@include default-style;//引入混入
margin:0;
padding:0;
}
p{
@include default-style;//引入混入
border:1px solid #efefef
}
总结：在样式表中，重复用到的样式可以定义在一个混入中，然后通过@include来在不同的选择器中引入
7.@extend继承
如果一个样式与另一个样式只有少量的区别，则可以使用@extend就会很有用
.default-box{
color:$defaultColor;
font-size:14px;
width:100%;
border:1px solid #fff;
}
.main{
@extend .default-box;//继承default-box
height:30px;
}
.section{
@extend .default-box;//继承default-box
height:100px;
}
8. 条件语句
8.1 @if 可以用来判断：
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } }
配套的还有 @else 命令
@if lightness($color) > 30% { } @else { background-color: #fff; }
8.2. 循环语句
支持 for 循环:
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
也支持 while 循环：
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
each命令，作用与for类似：
@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
9. 自定义函数
允许用户编写自己的函数。
@function double($n) { @return $n * 2; } .sidebar { width: double(5px); }
