Sass的使用
- 安装Ruby
- 安装Sass ( vscsde可以使用Live Sass Compiler 插件
- 编译sass 在项目路径下
sass --watch scss（文件夹名字）/xxx.scss:css（文件夹名字）/xxx.css - Sass 变量用于存储一些常用的颜色，数值等，一个变量可以在多处使用，修改时只需要修改一处。
- Sass 允许嵌套规则，使 CSS 更易于维护。
- Sass 提供了 & 用于引用父选择器。
- Sass 的 @import 指令用于导入其他样式模块。
- Sass 的 @import 指令可以嵌套在选择器内，产生嵌套效果。
@import "variables";
@import "mixins";
.slamdunk {
min-width: 320px;
@import "navbar";
@import "content";
@import "players";
}
- Sass 支持对数字标准的算术运算(加法 +，减法 - ，乘法 *，除法 / 和取模 %) 并保留单位。由于 CSS 中 / 可作为分隔符，因此除法运算要稍微注意以下情况。
p {
font: 10px/8px; // 原生的CSS，不作为除法
$width: 1000px;
width: $width/2; // 使用了变量, 作为除法
width: round(1.5)/2; // 使用了函数, 作为除法
height: (500px/2); // 使用了括号, 作为除法
margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}
- 单行注释 // 会在 .scss 被编译成 .css 后移除。多行注释 /* */ 会在 .scss 被编译成 .css 后保留。
- vscode liveSass 设置保存位置和压缩
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/dist"
}
]
- 命令行安装node-sass
npm install node-sass -g
命令行压缩另存
node-sass --output-style compressed scss/app.scss > dist/app.css
- 添加CSS浏览器前缀
npm install --global autoprefixer-cli
autoprefixer-cli -o dist/app.css dist/app.css
