一、初步了解sass
sass是css预处理器之一。css预处理器是专门处理css的编程语言,编程中无需考虑浏览器的兼容性,使语法简洁、可读性和适应性强。
sass下还分sass版和scss版:
①sass以.sass为文件名结尾,有严格的缩进式语法规范,不需要大括号和分号;
②scss以.scss为文件结尾,语法和css语法类似(推荐使用)。
二、安装sass环境
①安装ruby
选择对应版本下载
安装时,记得选择第二项打钩,不然手动添加至环境变量有点麻烦
②安装sass
搜索到ruby下的cmd,运行
输入gem install sass 回车安装;卸载命令:gem uninstall sass
三、书写sass
新建一个style.scss
$color: red;
body{
color: $color;
}
在cmd中输入【 sass 文件路径:输出文件路径 】编译
在html页面中,引入编译后的css路径即可。
批量编译命令:【sass 目录:编辑后的目录】例如【sass sass/:css/】将sass目录下的所有sass文件编译至css目录中
监听保存命令:【sass --watch 文件路径:编译后的文件路径 】