版权声明：转载请注明出处 https://blog.csdn.net/weixin_43586120/article/details/89452625
1、sass特点（现后缀为.scss）
1> 稳定、成熟、强大的专业级css扩展语言。
2> 完全兼容所有版本的CSS，可以无缝使用任何可用的CSS库。
3> 有无数的框架使用Sass构建。
2、sass安装与编译
1> 安装所需环境 : ruby
安装sass命令：gem install sass
更新Sass版本：gem update sass
删除Sass：gem remove sass
2> 编译sass : 考拉、gulp-sass
sass编译形式：
nested : 大括号跟在代码后面（默认）
expanded：大括号都在左列
compact：一行式css代码
compressed：压缩后的css代码
3、sass语法
/* 导入其它sass文件 */
1> 以下划线开头的scss文件,不会被直接编译,只能供其它sass文件使用 //_common.scss
2> @import 'sass文件名'; //引入公共文件
@import “common.scss”; //在1个sass里引入另一个sass，编译的时候会把他们合并到一个css文件里
//css本身包含一个指令@import，每次执行都会发送一次新的请求，消耗资源。Sass中的公共文件以下划线开头，这样的SCSS文件不会被编译，专门用于被其他的SCSS文件import进行使用的。在SCSS文件中@import时，不需要添加下划线。
/* sass嵌套（选择器嵌套、属性嵌套、伪类嵌套）*/----引入父选择器用&*/
.nav{ … ul{ … li { … } } } //复合属性嵌套
a {color:red;&:hover{ color:blue;}} //当前作用域下的父对象
border:{
style: solid; //border-style
left:{
width:4px; //border-left-width
}
}
/* 变量 */
//$变量名 : 值;
$size:12px; $flag:false; //定义变量，变量名须以$开头
body{ font-size: $size ; color:#f00; }
普通变量: $变量名 //属性值
特殊变量: #{$变量名} //变量作为属性或者其他的特殊情况
/* 选择 */
@if 条件{语句组;}@else if 条件{语句组;}@else{语句组;}
@if $flag{ .nav p{color:red;}} @else{ .nav p{ color:blue;}}
/* 循环 */
@for $变量 from <start> through <end>{语句组;} //如果值后面加上!default就表示默认值
@for $变量 from <start> to <end>{语句组;} //不包括最后一项
@for $i from 1 through 3{ //through也可写为to，区别为to不包含结束值
.item-#{$i} { width:2em*$i;}
} //#{}取变量的值，表示.item1、.item2、.item3，{}是变量，以$开头
$m:8;
@while $m > 0 { //while 循环
.items-#{$m} {
width:2em*$m;
}
$m:$m - 2 ;
} //这里可以对$m进行运算 让它每次都减去2
/* 数组 */
$数组名 : 值 值 值;（用空格或逗号分隔都可）/* Map */
$map名: (key : value,key : value);
方法：length($map)、map-get($map,key)、map-keys($map)、map-values($map)、
map-has-key($map,key)、map-merge($map,$map)合并、map-remove($map,key)
/* 遍历 */
@each $变量 in 数组{语句组;}
@each $img in q,w,e,r {
#{$img} {
background-image:url('#{$img}.png')
}
} //each 语法/* @mixin 宏 */
@mixin 宏名 {内容}
@mixin 宏名($变量,$变量){内容}
调用宏: @include 宏名
@mixin public($width,$height){ width:$width;margin:0 auto;}
//@minxin（宏：跟函数作用同，没有函数灵活）
//@mixin public($width:1000px,$height:300px){…} 可写默认参数，有默认参数即使引用时不传参也不会报错。数值设置与默认参数不同时，传对应参数值即可。如果存在没有设置默认值的参数，写在参数最前面即可
#footer{ @include public(300px);}
//也可将公共部分用@mixin public{}定义，然后用@include引用，不同之处是①@mixin方式可以传参；②第一种编译后默认会合在一起，第二种依然独立
/* 函数 */
@function 函数名(){@return 值;}
调用函数 函数名()
@function double ($number){
@return $number*2;
}
.text9{
font-size:double(20px);
} //函数语法
/* 继承 */
@extend 选择器
.common{ width:$w;border:1px solid #ff0;}
#head{ @extend .common;}
//把公共属性写在.common里，然后用“@extend .common”继承引用
/* 其它 */
@charset “utf-8”; //文档中中文的编码
sass里的“//”注释不能被css识别，/**/可被css识别
/* 小例子 */
$colors:(light:#fff,dark:#000); //声明一个map
@function color($key){
@return map-get($colors,$key);
}
body{ background:color(light);} //编译后变成：body{ background:#fff;}