一、什么是Sass
Sass是一种css的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得css的开发变动简单可维护。
这篇文章总结了sass的主要用法，平常就可以不用每次去看官方文档了。
使用Sass的好处
Sass的学名叫做“预处理器”，就是在css的基础上，引入变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，可以让我们使用更少的代码实现同样的效果，而且代码的整洁度，可读性更强，可以把反复用到的“css”属性定义成变量，然后通过变量名引用它们。
二、常用的Sass知识
1、变量
必须以$开头，如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
nth()方法，第一个参数为变量名称，第二个参数为变量的第几个值，从1开始数
例1:声明一个字体变量
$font-size:16px;
div{
font-size: $font-size;
}
例2:将变量嵌入到字符串中
$radius:radius;
.rounded{
border-#{$radius}:10px;
border: solid 1px #{$fontColor};
}
例3:使用nth()调取变量的值
$linkColor:green red!default;
div{
color: nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
2、sass中的map
语法
Sass 的 map 常常被称为数据地图，也有人称其为数组，它是以 key:value 成对出现
map数据以key：value的形式赋予，其中key和value是成对，并且每队之间用（，）分隔，其中最后一组没有（，）
map-get($map, key) 获取指定的值
用法：
$map: (
key1: value1,
key2: value2,
key3: value3
)
.btn {
color: map-get($btn-colors, key3);
}
列如：
$fontColor:red;
$map:(
jd:red,
tb:orange,
vp:hotpink
);
h1{
color: map-get($map , jd );
}
3、判断@if
@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用.
例1：单独使用@if
$status:true;
h1{
@if $status {
color: red;
}
例2：根据传入的值进行判断
$status:login;
h1{
@if $status == login {
color: blue;
}@else if $status == error{
color: red;
}@else{
color: black;
}
}
4、循环
4.1： @for循环
for循环有两种形式 ↓
-
@for $i from 1 to 4 { 语句;}不包含结束值 -
@for $i from 1 through 4{ 语句;}包含结束值
$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
例1：through关键字
ul {
list-style: none;
}
@for $i from 1 through 4 {
li:nth-child(#{$i}){
background: url(../images/#{$i}.png);
float: left;
width: 200px;
height: 200px;
margin: 0 20px 20px 0;
background-size: cover;
}
}
例1：to关键字
ul {
list-style: none;
}
@for $i from 1 to 3{
li:nth-child(#{$i}){
background: url(../../images/#{$i}.jpg);
float: left;
width: 200px;
height: 200px;
margin: 0 20px 20px 0;
background-size:cover;
}
}
4.2: @each循环
- @each 循环就是去遍历一个列表，然后从列表中取出对应的值。
- @each 循环指令的形式：
@each $var in <list>
列如：each 可以循环map
$style:(h1:20px,h2:10px,h3:6px);
@each $h,$s in $style{
#{$h}{
font-size:$s
}
}
5、sass中的mixin(混合)
概念：
Mixins是SASS中的一个强大的功能。使用@mixin根据功能定义一个模块，然后在需要使用的地方通过@include来调用声明的mixins。其主要功能是可以让你的代码简洁高效.
基本使用
例1: 基本的使用button的样式mixin,进行调用
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
//引用
.btn{
@include button;
}
例2：mixin也可以传递参数
@mixin button($background) {
font-size: 1px;
padding: 0.5px 1.0px;
text-decoration: none;
color: #fff;
background: $background;
}
注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮，那么就可以使用以下代码：
进行调用
.button-green {
@include button(green);
}
多个参数也可以使用逗号隔开，也都可以设置默认参数
例3：在例1的基础上增加$color,同时给背景设置默认颜色
@mixin button($backgroundColor,$color:red){
font-size:1px;
padding:0.5px 2px;
text-decoration: none;
color:$color;
background: $backgroundColor;
}
.button-green{
@include button(green);
}
6、Sass 嵌套
6.1后代嵌套和子嵌套,css选择器嵌套类似于HTML的嵌套规则
.box{
width:100px;
height:100px;
//后代嵌套
.middle{
width:50px;
height:50px;
//子嵌套
>.small{
width:25px;
height:25px;
}
}
}
6.2 属性嵌套
属性前缀相同嵌套
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
复合属性的同一和分解
.left{
border:1px solid #000{
left:none;
bottom:{
width:3px;
}
};
}
7、自定义函数
语法：
@function 函数名(形参) {
@return;
}
函数可以有多个语句组成，但是必须设定返回值(return)。但是混合(
mixin)就可以不用设置返回值即可操作。函数(function)传入的值也可以带有变量
例1：在函数内对宽度进行运算
@function getWidth($w) {
@return $w * 2;
}
.main{
max-width: #{getWidth(20)}px;
}
8、sass的继承
语法：@extend
选择器1{属性1:属性值1}
选择器2{@extend 选择器1}//继承选择器1的全部样式
&//父选择器
例1：
.big{
border:2px solid red;
}
.small{
@extend .big;
}
9、导入
就是将函数、变量、样式语句分离，全放在一个文件太杂乱
用法:
@import '文件名';
**实现步骤：1.创建一个被导入文件variate.scss
$color: yellow;
$fontColor:red;
$map:(
jd:red,
tb:orange,
vp:hotpink
);
2.在主sass文件夹导入
@import '../utils/variate.scss';
h1{
color: map-get($map , jd );
}
注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。
也可以导入 CSS 文件。
导入后我们就可以在主文件中使用导入文件等变量。
10、sass的运算
一般的编程语法中都支持使用运算，Sass 中同样可以做各种数学运算，包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。
- 加减乘除：
h1{
color: map-get($map , jd );
font-size:16px + 10; // ! 加法运算
}
h2 {
color: map-get($map , tb );
font-size:16px - 2; // ! 减法运算
}
h3{
color: map-get($map , vp );
font-size:12px * 2; // ! 乘法运算
}
h4{
color: map-get($map , vp );
font-size:(24px / 2); // ! 除法运算
}
注意：每个运算符前后必须有空格；除法运算，要进行运算需要用()号括起来；不然会原样输出
- 变量运算
$one: 1px;
$two: 2px;
$three: 3px;
h1{
color: map-get($map , jd );
font-size: $one+$two+$three;
}
-
颜色运算
（颜色会采用十六进制的，如黑色#000000）
p {
color: #010203 + #040506;
// color: #010203 * 2;
}
- 字符运算
$content: 'hello' + 'world';
.box:before {
content: $content;
}
