1、Sass简介

Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

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

在使用 Sass 之前，你需要在项目中安装它；

1.1、npm安装步骤：

确保已经安装了Node.js和npm；

//全局安装
npm install -g sass
//查看安装版本
sass --version
//简写
sass -v

使用前需要先创建一个SCSS文件，例如common.scss；
sass文件一般保存在.scss的文件中，css则是保存在.css文件中；

其他安装介绍

2、变量

变量通常用来存储一些会重复利用的样式；例如颜色、字体；
格式：$符号作为变量的标志；
命名：变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符），可使用驼峰命名法、下划线链接命名法；
写法：同css，变量名与值之间用冒号分割；
Sass map ：Sass map 是一种数据结构，允许你存储一系列的键值对，类似于 JavaScript 中的对象

sass变量可以存储的信息包含：字符串、数字、颜色值、布尔值、列表、null值；

//变量创建
$mainColor:#00b362;//颜色变量
$blackColor:#000;
$fontSize:16px; //数字变量
$fontFamily:"Helvetica Neue", Helvetica, Arial, sans-serif;//字符串变量
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);//Sass map
//变量使用
body{font:14px $fontStack;color: $blackColor;
}
//你可以使用 map-get 函数来获取特定键的值
.ceshi-main{p{font-size: 28rpx;}p:nth-child(1){color: map-get($colorMap, color1);}p:nth-child(2){color: map-get($colorMap, color2);}p:nth-child(3){color: map-get($colorMap, color3);}
}

3、嵌套

Sass 允许您嵌套 CSS 选择器，嵌套方式 与 HTML 的视觉层次结构相同。请注意，过度嵌套的规则 将导致过度限定的 CSS，这些 CSS 可能很难维护，并且 通常被认为是不好的做法。

使用大括号和缩进来表示层级关系，可以多层嵌套

//.scss嵌套写法
nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}& > p {color: #f00;}& + p {color: #0ff;}&:nth-child(2) a{color: #ff0;}
}

//.css相同层次结构写法
nav ul {margin: 0;padding: 0;list-style: none;
}
nav li {display: inline-block;
}
nav a {display: block;padding: 6px 12px;text-decoration: none;
}
nav > p{color: #f00;
}
nav + p{color: #0ff;
}
nav:nth-child(2) a{color: #ff0;
}

备注：
nav > p 写法为后代选择器，只匹配直接后代；
nav + p 写法为兄弟组合器，只有与nav相邻的P标签会匹配此语法；
nav:nth-child(2) 写法为伪类选择器；

<nav><p></p>
</nav>

4、混合@mixin与@include

混合器类似于函数，可以包含可重用的样式和变量，简化复杂样式定义。

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。

//定义无参数的混合器
@mixin name{background: #fff;box-shadow: 0 0 1px rgba(0,0,0,.25);color: #222;
}.main{@include name;//使用默认值
}

//定义有参数混合器，name混合器名称，$theme混合器传参，#f00参数默认值
@mixin name($theme:#f00){background: $theme;box-shadow: 0 0 1px rgba($theme, .25);color: #fff;
}//使用混合器，使用@include关键字
.info{@include name;//使用默认值
}
.success {@include name($theme:#73df8a);//传参
}

//设置可变参数
@mixin box-shadow($shadows...){-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}//引用
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

//浏览器前缀使用混入
@mixin transform($property) {-webkit-transform: $property;-ms-transform: $property;transform: $property;
}//使用
.myBox {@include transform(rotate(20deg));
}//转换为css代码
.myBox {-webkit-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin color-set { } 与 @mixin color_set { } 是一样的混入。

//具体实例设置，定义混合器
@mixin colorSet($bgColor:#fff4e4,$boxColor:#000d8b){background: $bgColor;box-shadow: 0 0 10px rgba($boxColor,0.5);-moz-box-shadow: 0 0 10px rgba($boxColor,0.5);-webkit-box-shadow: 0 0 10px rgba($boxColor,0.5);color: #000;
}
//使用混合器
.ceshi-main{.info{width: 60px;height: 60px;@include colorSet;//使用默认值}.info2{width: 60px;height: 60px;@include colorSet(#edfff1,#00470f);//使用默认值//@include colorSet($bgColor:#edfff1,$boxColor:#00470f);}
}

//渲染结果
.ceshi-main .info{width: 60px;height: 60px;background: #fff4e4;box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);-moz-box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);-webkit-box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);color: #000;
}
.ceshi-main .info2{width: 60px;height: 60px;background: #edfff1;box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);-moz-box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);-webkit-box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);color: #000;
}

混合器也支持嵌套

//定义混合器
@mixin mainText($size:14px,$color:#222,$lightColor:#999){color: $color;font-size: $size;p{color: $color;font-size: $size;}span{font-size: 24rpx;color: $lightColor;}
}
//使用混合器
.info{@include mainText;
}
.success{@include mainText(18rpx, #3bc157, #c6e7cd);
}
.error{@include mainText(18rpx, #e73535, #eab7b7);
}

5、sass函数

sass定义了各种类型的函数，字符串相关、数字相关、列表相关、映射相关、选择器相关、颜色相关等等；
菜鸟教程参考文档

数字函数

函数	描述&实例
abs(number)	返回一个数值的绝对值
ceil(number)	向上取整
comparable(num1,num2)	返回一个布尔值，判断num1和num2是否可以进行判断
floor(number)	向下取整
max(number…)	返回最大值
min(number…)	返回最小值
round(number…)	返回最接近该数的一个整数，四舍五入

abs(15)//结果15
abs(-15)//结果15ceil(15.20)  //结果: 16comparable(15px, 10px)//结果: true
comparable(20mm, 1cm) //结果: true
comparable(35px, 2em) //结果: falsefloor(15.80) //结果: 15max(5, 7, 9, 0, -3, -7) //结果: 9min(5, 7, 9, 0, -3, -7) //结果: -7round(15.20) //结果: 15
round(15.80) //结果: 16

Sass Map(映射)函数

函数	描述&实例
map-get(map, key)	返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。
map-has-key(map, key)	判断 map 是否有对应的 key，存在返回 true，否则返回 false。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small") //结果: 12pxmap-has-key($font-sizes, "big") //结果: false

6、sass的@import

sass与css类似，支持@import指令；@import 指令可以让我们导入其他文件等内容；

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。

//创建index.scss文件
//导入 common.scss文件。
@import "common";

//common.scss文件
html,body,ul,li,ol,p,img,h1,span{margin:0;padding:0;
}