什么是sass
1.Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。
2.工程越大，css文件越大，重复代码越来越多，会变得难以维护，借助Sass可以提高写css的效率。
安装
npm安装
npm install -g sass
// 如果是 Webpack 的使用者,还需要 npm install -g sass-loader
其他安装：sass官网(www.sass.hk/)
编译.scss文件为.css文件
Sass使用.scss作为文件后缀名，不能直接在< link >标签里使用，需要编译为 .css文件。
1.将.scss转成.css文件
// 将aa.scss文件转成bb.css文件
sass aa.scss bb.css
2.将.css文件随.scss文件变化
sass --watch aa.scss:bb.css
3.将css文件夹随包含.scss文件夹变化
// 表示：cc这个文件夹里任意一个.scss文件变化时，就将其编译到名字dd这个文件夹里面（会自动生成相应的.css文件）
sass --watch cc:dd
基础使用
1.变量-$
$main-color:pink !default; // 默认变量
$main0clor:#000; // 全局变量
h1 {
$main-color:#fff; //局部变量
color:$main-color;
}
// 编译后：
h1 {
color:#fff;
}
2.嵌套
div {
width: 100px;
ul {
width: 50px;
li {
width: 20px;
}
}
// &--> 父选择器名称
& p {
color；#000
}
}
// 编译后：
div {width:100px}
div ul {width:50px}
div ul li {width:20px}
div p { color:#000 }
属性嵌套
div {
width: 100px;
border:1px solid red {
top: 0;
left: 0
}
}
// 编译后：
div {
width:100px;
border；1px solid red;
border-top:0;
border-left:0;
}
3.继承
一个选择器可以继承另一个选择器的全部样式(通过：@extend)
.one {
width: 30px;
}
.two {
@extend .one;
color: red;
}
// 编译后
.one { width:30px }
.two {
width:30px;
color:red;
}
4.混入mixin
相当于预先写好了一组样式，其它地方直接引用(通过@include)
@mixin 名字（参数1，参数2，...）
{
........样式.......
}
无参数
@mixin hunri {
width:100px;
p {
color:pink;
}
}
div {
@include hunri;
}
// 编译后
div {
width:100px;
}
div p {
color:pink;
}
有参数(参数名前面要写$)
@mixin hunri($one,$two) {
width:$one;
p {
color:$two;
}
}
div {
@include hunri(200px,red);
}
// 编译后
div {
width:200px;
}
div p {
color:red;
}
5.Interpolation插入
把一个值插入到另一个值，具体用法如下 #{变量}
$study:color;
div {
#{$study}:red;
}
// 编译后
div {
color:red;
}
6.计算
SASS允许在代码中使用算式
div {
width:(10px*2);
}
// 编译后
div {
width:20px;
}
7.if判断与循环
@if判断
@if 判断条件 {
.......执行语句...
} @else {
...else有就写没就不写....
}
div {
@if 5>6 {
color:red;
}
@else {
color:pink;
}
}
// 编译后
div {
color:pink
}
@for循环
结束值执行：
@for 变量 from 开始值 through 结束值 {
......
}
结束值不执行：
@for 变量 from 开始值 to 结束值 {
......
}
@for $i from 1 to 3 {
.div#{$i}{
height: $i*20px;
}
}
// 编译后
div1 { height：20px }
div2 { height:40px }
@while循环
@while 条件 { ... }
$giao: 1;
@while $giao<3 {
.div#{$giao}{
height: $giao*10px;
}
$giao : $giao+1;
}
// 编译后
.div1 {
height: 10px;
}
.div2 {
height: 20px;
}
@each循环
@each 变量 in 列表{ ... }
$yanse: red blue black;
@each $i in $yanse {
.div-#{$i}{
color: $i;
}
}
// 编译后
.div-red { color:red; }
.div-blue { color:blue; }
.div-black { color:black; }
8.函数
字符串函数
// 1.取除引号
unquote('hello sass!'); === hello sass!
// 2.加引号
quoto(hello sass!); === 'hello sass!'
// 3.大写
to-upper-case('Hello Sass!'); ==='HELLO SASS!'
// 4.小写
to-lower-case('Hello Sass!'); ==='hello sass!'
数字函数
// 1.百分比
percentage(5px/10px);=== 50%
// 2.四舍五入
round(15.6px);=== 16px
// 3.向上取整
ceil(17.1px);=== 18px
// 4.向下取整
floor(17.2px);===17px
// 5.绝对值
abs(-8.5px);===8.5px
// 6.最小值
min(6,50,3,10%)；=== 3
// 7.最大值
max(4,10,80%);=== 80%
// 8.随机数
random();=== 0.2344
颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色
hsl(色相，饱和度，明度)
div {
color: hsl(5,20%,20%)
// 编译后
color:#3d2b29;
}
hsl（色相，饱和度，明度，不透明度
div {
color: hsl(5, 20%, 20%,0.5);
// 编译后
color:rgba(61, 43, 41, 0.5);
}
调整色相---adjust-hue(颜色，调整的度数)
body{
color: adjust-hue(hsl(0,100,50%), 100deg);
// 编译后
color:#55ff00;
}
用来调整颜色明度--- lighten让颜色更亮，darken让颜色更暗
body{
background-color: lighten(rgb(228, 145, 145),50%);
// 编译后
background-color: white;
color: darken(rgb(228, 145, 145),50%);
// 编译后
color: #5f1717;
}
用来调整颜色纯度 saturate让颜色更纯 ，desaturate让颜色不纯
div {
color:saturate(颜色，百分比)
}
9.@规则
@import
可用来引入scss和sass文件,所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
@media
@media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。
.one {
width: 100px;
@media screen and (orientation:landscape) {
width: 200px;
}
}
// 编译后
.one {
width: 100px;
}
@media screen and (orientation:landscape) {
.one {
width: 200px;
}
}
@at-root
用来跳出根元素
.one {
color: pink;
.two {
color: red;
@at-root .three {
color: green;
}
}
}
// 编译后
.one { color:pink }
.one .two { color:red }
.three { color:green }
@debug,@warn,@error
在 Sass 中是用来调试的
总结
本文只是自己学习的笔记，参考了许多优秀博主的文章，如介意，请您联系我，马上删除
参考文件：juejin.cn/post/687000…
auroras.blog.csdn.net/article/det…
