入门sass

sass:可编译的css语法

可维护性，可重复使用性更高
可定义变量，if，for等，提高css编译效率。但在各种框架语法中，已经可以满足我们样式需求
如果UI框架中，没有的效果，可以用sass

基本语法：
1.两种文件格式
.sass:没有{}的css，但不好区分选择器和样式，一般不适用
.scss:与普通的css完全一致，只是多了变量等新语法内容
2.两种文件的执行
.sass:浏览器不能直接执行，需要把sass转化为css来执行，所以要进行编译
编译方法：
（1）使用vscode，搜索sass
（2）使用node.js，一般是开发时使用。需要安装全局sass
npm i -g sass
（3）使用gulp进行编译，同时打包压缩
一般是项目上线时使用
nodejs编译sass的语法：
对一个文件进行编译–需要手动编译，要重新执行npm
1.建立scss文件，demo.scss
2.在cpm中执行文件夹，并建立1.css文件
sass demo.scss 1.css
对文件进行监听
sass --watch scss文件名
对文件夹进行监听
sass --watch sass文件夹:css文件夹
使用sass的基本语法
1.变量的使用：
$变量名称:数值，使用时要有$符号
2.if判断
执行逻辑与JS和PHP中是完全相同的，语法格式不同
sass中判断条件没有小括号
（1）@if 变量 判断符号 数值 {样式}
（2）@if 变量 判断符号 数值 {样式}
@else {样式}
（3）@if 变量 判断符号 数值 {样式}
@elseif 变量 判断符号 数值 {样式}
@lese {样式}
3.for循环
（1）从数值1到数值2，包括数值1 ，不包括数值2
@for 变量 from 数值1 to 数值2{定义的程序}
解析循环变量i时，要用#{KaTeX parse error: Expected 'EOF', got '}' at position 2: i}̲ （2）从数值…i}
4.each循环
–针对数组的循环
–执行方式
$变量:(),(),(),()
@each $变量1，$变量2 in KaTeX parse error: Expected '}', got '&' at position 206: … 伪类：div{&̲:hover{}} 相当于 …type.KaTeX parse error: Expected '}', got 'EOF' at end of input: …kit-transition:type KaTeX parse error: Expected 'EOF', got '}' at position 23: … }̲ …type:all.KaTeX parse error: Expected '}', got 'EOF' at end of input: …kit-transition:type $time;
}
div{@include t3(all,2s);}
打包sass
先将sass转化为css
1.下载sass编译使用的依赖包 npm i gulp-sass
2.加载gulp-sass依赖包（gulpfile.js）
const sass = require(‘gulp-sass’)
3.制定sass打包规范
(1)先将sass转化成css
const sassHandler = function(){
return gulp.src(’./src/scss/.scss’).pipe(sass()).pipe(autoprefixer()).pipe(cssmin()).pipe(gulp.dest(’./diss/css’))
}
4.指定监听规范
const watchHandler = function(){
添加sass的监听规范
gulp.watch(’./src/sass/.scss’,sassHandler)
}
5.导出默认执行程序
module.exports.default = gulp.series(
delHandler,
gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,sassHandler),
webserverHandler,
watchHandler
)