sass
sass概述
sass是一个预编译的css语言，它是使用ruby语言写的，和它一样的预编译语言还有less，它是使用js写
的。sass的环境之前是ruby环境，但是由ruby并了python，所以它可以运行在python环境上，这个些
内容并不能直接使用，因为它属于预编译css，没有进行编译是不能被使用的。编译完还是css，那么我
们知道它有个编译过程并比损耗效率，那么它的优势在哪？
预编译css的优势就是它可以减少你的css代码的书写量，并编译出对应的简洁的css代码。
常用的预编译css
sass （底层采用ruby书写）循环可以支持所有类型
less （底层采用js书写） 循环只支持数值类型
stylus （底层采用的是js （功能单一) 它是以缩进来区分对应的层级）
sass的常用俩种形式
sass 后缀（以缩进来做为区分 没有{} ;）
scss 后缀（类似于css的区分）
sass的编译环境
node支持python 运用node环境来运行sass
安装
npm install sass -g
编译
sass 需要编译的文件 编译后的文件
监听编译
sass --wacth 需要编译的文件:编译后的文件
vscode的插件来帮助我们编译sass
easy sass 扩展
保存后自动编译
sass入门
官方网站：https://www.sass.hk/
变量定义 使用$进行变量定义（*）
$color:red; div{ background-color:$color; }
div { background-color: red; }
选择器嵌套 使用&表示当前选择器（*）
div{ background-color:$color; a,b{ text-align: center; } &:hover{ color: $color; } }
div a, div b { text-align: center; } div:hover { color: red; }
样式嵌套
span{ border: 1px solid #ccc { bottom: none; }; }
div span { border: 1px solid #ccc; border-bottom: none; }
支持运算符 + - * / %
$size:10px; p{ font-size: $size * 5 / 10 + 20 % 1; } #box{ font-size: 10px + 10; }
p { font-size: 5px; } #box { font-size: 20px; }
支持if else判断
#content{ @if $size>5 {font-size: $size - 5;} @if $size - 5>5 {color:red} @else if $size - 5<5{color:blue} @else {color:green} }
#content { font-size: 5px; color: green; }
支持for循环 （插值表达式 #{}）
//普通for循环 @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //for each循环 $list : 1,2,3,4,5; @each $var in $list { .icon-#{$var}{ font-size:$var * 5px ; } }
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } .icon-1 { font-size: 5px; } .icon-2 { font-size: 10px; } .icon-3 { font-size: 15px; } .icon-4 { font-size: 20px; } .icon-5 { font-size: 25px; }
支持while循环
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
.while-6 { width: 12em; } .while-4 { width: 8em; } .while-2 { width: 4em; }
注释 /**/ 多行注释 // 单行注释
// 不会编译到css文件 /**/会编译到css文件
混入器 mixin （*）
//混入器 @mixin borderStyle { border: 1px solid red; } .box{ @include borderStyle() } //传参的混入器 支持默认参数的 @mixin borderStyle1($a:1px,$b:solid,$c:green) { border: $a $b $c; } #box{ // @include borderStyle1(1px,solid,red) @include borderStyle1(2px) }
.box { border: 1px solid red; } #box { border: 2px solid green; }
方法 返回值的形式
@function reduce($a){ @return $a+10; } #hello{ width: reduce(10px); }
#hello { width: 20px; }
继承 extend（复用 *）
#hi{ //继承hello的内容 @extend #hello; height: 20px; }
#hello, #hi { width: 20px; } #hi { height: 20px; }
导入 （*）
@import './mixin.scss'; #box{ @include borderStyle1() }
#box { border: 1px solid green; }
gulp
gulp是一个自动化构建工具（构建环境 将代码打包 基于文件流的形式） （outer了），webpack ---vite。
https://www.gulpjs.com.cn/
都是基于node环境运行的。用到模块来构建环境
npm install gulp -g
npm install webpack -g
npm insatll vite -g
