前言：
会详细的介绍各环境下的配置使用，语法格式等。但我演示一般都是以webpack+vue为主。
一、CSS预处理器及Sass
<1>定义：
·css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作
·sass是一门高于CSS的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通CSS更加强大的功能。Sass能够提供更简洁、更优雅的语法，同事提供多种功能来创建可维护和管理的样式表。
<2>目前流行的CSS预处理器语言有：Sass（SCSS）、LESS、Stylus等
<3>Sass和SCSS:两者其实是同一种东西。区别如下
·文件扩展名不同，Sass是以“.sass”后缀为扩展名，而SCSS是以“.scss”后缀为扩展名。
·语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带大括号（{}）和分号（;）,而SCSS的语法书写和我们的CSS语法书写方式非常类似。
二、sass的安装及使用
<1>node.js环境下使用
·安装sass-loader：npm install sass-loader --save-dev
·安装node-sass：npm install node-sass --save-dev
·webpack.dev.config.js中rules配置：
{
test: /\.(scss|scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
·可能会因为版本问题报错：可以降低版本安装
npm install [email protected] --save-dev
<2>在其他环境下使用：
·下载Ruby http://rubyinstaller.org/downloads
·打开Ruby的Command，输入命令安装Sass:
gem install sass
·更新sass的命令：
gem update sass
·写在sass的命令：
gem uninstall sass
<3>引用sass：
红字
三、Sass的语法格式及编译调试
<1>Sass的语法格式
·Sass的语法格式是通过tab键控制缩进的一种语法规则，不带任何分号和大括号，后缀名为“.sass”。
$width-l: 300px
$height-l: 300px
div
width: $width-l
height: $height-l<2>Scss的语法格式
·和CSS的语法格式无任何区别，后缀名为“.scss”。
$width-l: 300px;
$height-l: 300px;
div{
width: $width-l;
height: $height-l;
}<3>Sass编译：命令编译、GUI工具编译、自动化编译
·命令编译：
单文件编译：
sass input.scss output.css
多文件编译：
sass (.scss文件夹路径)/:(css文件夹路径)/
利用watch参数监听文件变化，自动编译：
sass --watch input.scss:output.css·GUI界面工具编译：Koala、CodeKit
以及VSCode的Live Sass插件（推荐）
https://www.sass.hk/skill/sass154.html·自动化编译：Webpack、Grunt、Gulp
webpack.dev.config.js中rules配置：
{
test: /\.(scss|scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
其他两个自行百度吧，我不常用抱歉哈~·字符编码容易造成编译错误，谨记设置文件编码为"utf-8"，且路径不要带中文
<4>Sass输出风格：
·嵌套输出方式 nested
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }·展开输出方式 expanded
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}·紧凑输出方式 compact
/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }·压缩输出方式 compressed
/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}四、Sass的基本特性-基础(以scss语法格式演示)
<1>sass声明变量：变量可以在CSS规则块定义之外存在。如果在{...}块中，那么该变量只能在此规则块中使用。
//全局变量
$width-3: 300px;
$basic-border: 1px solid black;
div{
//局部变量
$width: $width-3; //变量中还可以引用变量
width: $width;
border: $basic_border; //注意中划线命名一样可以用下划线引用
}
//编译后
div{
width: 100px;
border: 1px solid black;
}<2>默认变量：一般是用来设置默认值，然后根据需求来覆盖的。覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
$baseLineHeight: 2;
$baseLineHeight: 3; //一般情况下后面定义的变量会覆盖前面的变量
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//编译后
body{
line-height:3;
}<3>选择器嵌套：
**** 基础用法 ****
//正常css写法
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
//sass选择器嵌套写法
#content{
article{
h1{ color: #333 }
p{ margin-bottom: 1.4em }
}
}
**** 父选择器的标识符& ****
//正常情况下，为父选择器添加伪类时可用
article a { color: blue }
article a:hover { color: red }
//sass选择器嵌套写法
artical a{
color: blue;
&:hover{
color: red;
}
}
**** 群组选择器嵌套 ****
//正常css写法
.container h1, .container h2, .container h3 {
margin-bottom: .8em
}
nav a, aside a {
color: blue
}
//sass群组选择器嵌套写法
.container{
h1,h2,h3{
margin-bottom: .8em
}
}
nav, aside{
a{ color: blue; }
}
**** 子组合选择器和同层组合选择器：>、+和~ ****
//正常CSS写法
article ~ article { border-top: 1px dashed #ccc } //选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
article > footer { background: #eee } //选择article下紧跟着的子元素中命中section选择器的元素。
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 } //选择nav元素后紧跟的同层article元素：
//Sass写法
article{
~ article { border-top: 1px dashed #ccc }
> footer{ background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}<4>属性嵌套：
//正常CSS写法
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
**** Sass属性嵌套写法 ****
.box{
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
**** 其他写法例子 ****
//对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：
//正常CSS写法
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
//Sass写法
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}<5>伪类嵌套：
//正常CSS写法
clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
//Sass伪类嵌套写法
.clearfix{
&:before,
&:after{
content: "";
display: table;
}
&:after{
clear: both;
overflow: hidden;
}
}<6>混合器@mixin
·官网的定义：如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
·声明混合器：
**** 不带参数的混合器 ****
//@mixin用来声明混合器的关键字也就是名字，后面接的border-radius就是这个混合器的名称，括号里就是复用的样式
@mixin border-radius{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
**** 带参数的混合器 ****
//border-radius混合器有一个参数，默认值为5px，如果调用时没有传递参数则取默认值
@mixin border-radius($radius:5px){
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin div($width,$height){
width:$width*3;
height:$height/2;
}
**** 调用混合器 ****
@mixin border-radius($radius:5px){
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
button{
@include border-radius;
}
.box{
@include border-radius(3px);
}
//编译出来的样式如下
button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.box{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
**** 参数过多时的混合器定义 ****
//有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}
//调用
.box {
@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
//编译结果
.box {
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}<7>继承@extend
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
.seriousError {
@extend .error;
border-width: 3px;
}
//编译后的结果
.seriusError, .error{
border: 1px solid red;
background-color: #fdd;
//.error下的样式也会一并继承
a{
color: red;
font-weight: 100;
}
}
.error{
border-width: 3px; //会覆盖继承过来的border-width
}<8>占位符%placeholder
·占位符“%”它可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
//编译结果
//通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。恰好弥补了调用混合器并不会合并相同代码，造成冗余的不足。
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}<9>混合器、继承、占位符何时使用
·如果你的代码块中涉及到变量、传参改变值等，建议使用混合宏来创建相同的代码块。（缺点：多次调用同一个@mixin，不会合并相同代码造成冗余）
·如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
·占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。
<10>插值语句#{}
**** 普通用法 ****
$properties: (margin, padding);
@mixin set-value($side, $value){
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box{
@include set-value(top, 14px)
}
//编译结果
.login-box {
margin-top: 14px;
padding-top: 14px;
}
**** 构建选择器用法 ****
@mixin generate-sizes($class, $small, $medium, $big){
.#{$class}-small{font-size: $small};
.#{$class}-medium{font-size: $meidum};
.#{$class}-big{font-size: $big};
}
@include generate-sizes("header-text", 12px, 20px, 40px);
//编译结果
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }<11>sass注释
·/注释内容/、"//",这两种方式，第一种会在编译出来的CSS中显示，第二种不显示
//定义一个占位符
%mt5 {
margin-top: 5px;
}
/*调用一个占位符*/
.box {
@extend %mt5;
}
###编译结果###
.box {
margin-top: 5px;
}
/*调用一个占位符*/<12>Sass数据类型：
·数字：1、2、3、10px;
·字符串：有引号字符串和无引号字符串，"foo"、'bar'、baz
·布尔型：true、false
·空值：null
·值列表：空格或者逗号分隔开的，例如1.5em 1em 0 2em、Helvetica,Arial,sans-serif
五、Sass的基本特性-运算
<1>加法：在变量或属性中都可以做加法运算
.box{
width: 20px + 8in; //in：1英寸=96px
}
//编译后
.box{
width: 788px;
}
**** 不同单位运算会出错 ****
.box{
width: 20px + em; //Incompatible units: 'em' and ‘px'.”
}<2>减法:同样不同单位运算也会报错
$full-width: 960px;
$sidebar-width: 200px;
.content{
width: $full-width - $siderbar-width;
}
//编译结果
.content{
width: 760px;
}<3>乘法：运算中多个值之间只需要提供一个单位即可，多个单位会报错。同样不同单位运算也会报错。
.box{
width: 10px * 2px; //报错
}
//正确写法
.box{
width: 10px * 2;
}
//编译结果
.box{
width: 20px;
}<4>除法：和乘法规则一样。有一个特殊规则，运算时需要用括号()包裹，但在有其它运算符或者变量存在的情况下可以不需要()包裹。
.box{
width: 20px / 2; //编译出来还是这样
}
.box{
width: (20px / 2); //编译出正确结果 10px
}
.box{
width: 100px / 2 + 10; //编译出正确结果 60px
}
$width: 100px;
.box{
width: $width / 10; //编译出正确结果 10px
}<5>颜色运算：所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算
p {
color: #010203 + #040506;
}
//计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09
p {
color: #050709;
}
**** 算数运算也能将数字和颜色值一起运算，同样也是分段运算的 ****
p {
color: #010203 * 2;
}
//编译结果
p {
color: #020406;
}