概述
sass属于css预处理器：
一种新的语言将CSS作为目标生成，然后开发者就能使用这种语言进行编码工作
预处理器通常可以实现浏览器贱人，变量，结构体等功能，代码更加易于维护。
作用：
存在即合理：
1.减少后代选择器，过多层级重复代码的书写
2.变量的概念，多处引用，只改被引用的变量值即可
3.css压缩功能
优势：
可以使用变量，常量，嵌套，混入，函数等功能，更有效的写出css
sass有两套语法规则，
第一种使用缩进作为分隔符来区分代码块的;
第二种是和css使用{}来作为分隔符，后者又称为scss;
强壮的库：compass 使其功能更加的丰富
特征：
sass与scss 区别与使用
sass是老版本的，新版本是scss，相较于老版本更稳定，坑也更加少
sass 书写没有{}，没有结束符号;
侵入程度更少，适合已有项目中css快速转型到scss
同类型css预编译语言库比较：
sass诞生于2007年
less诞生于2009年，受sass影响比较大
stylus 诞生于2010年，来自nodejs社区，主要为node项目进行css预处理（人气较前2者较少）
sass的安装
安装ruby
1.要先安装系统环境变量ruby
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
因为安装sass使用的gem是ruby的语言
注：
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量
如果您不知道要安装哪个版本，并且您正开始使用Ruby，我们建议您使用 Ruby+Devkit 2.6.X (x64) 安装程序。
查看ruby是否安装成功
ruby -v
请尽可能用比较新的 RubyGems 版本，建议 2.6.x 以上。
正式安装sass
Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。
我们可以使用这个系统来 轻松地安装Sass和Compass。
gem install sass
gem install compass
查看sass是否安装成功
sass -v
查看compass版本
compass -v
sass常用命令
单文件转换命令
sass input.scss output.css
单文件监听命令
sass --watch input.scss:output.css
监听整个目录：
sass --watch app/sass:public/stylesheets
编译配置信息
sass input.scss output.css --style compact
--style表示解析后的css是什么排版格式;
sass内置有四种编译格式:
1. nested -- 格式缩进，使其有视觉层次感
2. expanded -- 常规的格式排版
3. compact -- 每个独立元素样式单独一行，不回车
4. compressed -- 全部压缩一行
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件
变量类型以及声明与作用域
单值变量
【注】：
变量有作用域，需要注意；
且位置有先后要求，先声明，再引用，位置不能颠倒；
$color:red;
body {
color: $color;//正确的位置
color: $color2;//报错，先声明，后引用
$color2: blue;
}
footer {
color: $color2;//报错，局部声明有作用域范围
}
多值变量
一个变量值是一组数据，通过nth(变量名,索引); 来设置，
值得注意的是。索引从1开始
$li-padding:10px 20px 30px 40px;
.li1 { padding-left:nth($li-padding,1);}
.li2 { padding-left:nth($li-padding,2);}
.li3 { padding-left:nth($li-padding,3);}
键值对类型的变量
格式
变量名,键名);
$mapsval:(color1:red,color2:yellow);
.li4 { color:map-get($mapsval,color1);}
.li5 { color:map-get($mapsval,color2);}
运算
定义变量：
$width1:10px;
$width2:15px;
【 加法运算 】
//-数字类型
.box3 { width:$width1+$width2; }
//-减法运算 (记得空格隔开，否则会认定为连字符，和被减数组成一个新的变量)
.box3 { width:$width1 - $width2; }
//-字符串拼接
.box3 { content:A + 'bc'; }
//-scss中的模板字符串
$version:1.5;
.box3:after { content:"当前版本: #{$version} "}
【除法运算】
.p1 { width:$width1/2; }
//--单纯数字运算需要加小括号，单位符号继承与前者
.p2 { width:(300px/2); }
混合传参以及默认值
1.混合定义样式传参与默认值
@ mixin mybox($bg: #FFF) {
width: 300px;
height: 300px;
backgroud: $bg
}
.box1 {@
include mybox();
}
.box2 {@
include mybox(green);
}
注：
多个参数， 需要注意先后顺序
如果不希望讲究顺序， 则需要以键值对的形式传参如
@ include mybox($fz: 15px, $bg: #F60)
如果参数多的话， 使用这个方式更加灵活， 容错率低一些； 否则要严格按照顺序传值
1-2.一个形参， 多个实参（ 使用类似js解构的方式完成）
@mixin box($sd...) {
box - shadow: $sd;
}
.box1 {
@ include box(0 1px 3px #333,1px 0 3px # F60);
}
1-3.传递内容到content
例： 媒体查询， 将样式写在不同媒体宽度内；
@mixin a {
@media only screen and(min - device - width: 320px) and(max - device - width: 568px) {
@content;
}
}
@include a {
font - size: 12px;
}
继承的方式
写法一：
.block { padding:5px;}
p { @extend .block }
写法二：
@mixin block {padding:5px;}
p { @include block; }
效果相同的情况下，如何选择？
@extend与@mixin实现效果相同，应该如何选择：
官方建议：
为了性能，选择Mixins吧！
书写方式
1.链式继承、类似洋葱圈，后者继承前者，又拥有自己的特点
.boxs { border:1px #ccc solid;}
.box1 { @extend .boxs; color:green; }
.box2 { @extend .box2; background:pink; }
2.属性嵌套
a标签嵌套书写，省略一个a...
a {
color:#333;
&:hover {
color:blue;
}
&.btn {
color:green;
}
}
注意：
1.sass中使用中文，如
font-style;
会报错，需要在sass中，添加 @charset "UTF-8";
2.sass新版本scss对已有项目更加友好，
直接将原有css后缀名修改为scss即可使用，成本更低
网友评论