学习 Sass

Sass的使用

1. 安装Ruby
2. 安装Sass ( vscsde可以使用Live Sass Compiler 插件
3. 编译sass 在项目路径下 sass --watch scss（文件夹名字）/xxx.scss:css（文件夹名字）/xxx.css
4. Sass 变量用于存储一些常用的颜色，数值等，一个变量可以在多处使用，修改时只需要修改一处。
5. Sass 允许嵌套规则，使 CSS 更易于维护。
6. Sass 提供了 & 用于引用父选择器。
7. Sass 的 @import 指令用于导入其他样式模块。
8. Sass 的 @import 指令可以嵌套在选择器内，产生嵌套效果。

@import "variables";
@import "mixins";

.slamdunk {
  min-width: 320px;
  @import "navbar";
  @import "content";
  @import "players";
}

8. 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）中，括号可以被忽略。
}

9. 单行注释 // 会在 .scss 被编译成 .css 后移除。多行注释 /* */ 会在 .scss 被编译成 .css 后保留。
10. vscode liveSass 设置保存位置和压缩

    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/dist"
        }
    ]

11. 命令行安装node-sass

npm install  node-sass  -g

命令行压缩另存

node-sass --output-style compressed scss/app.scss > dist/app.css

12. 添加CSS浏览器前缀

npm install --global autoprefixer-cli
autoprefixer-cli -o dist/app.css dist/app.css