引子
① VsCode 集成 Sass ✅
1.1 安装 Live Sass Compiler 插件
Live Sass Compiler 是一个用于实时编译和自动刷新 SCSS 文件的 VS Code 插件。
1.2 点击该页的设置按钮
1.3 进行配置
"liveSassCompile.settings.autoprefix": [ "> 1%", "last 2 versions" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css" } ], "liveSassCompile.settings.excludeList": [ "/**/node_modules/**", "/.vscode/**" ], "liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": 自动添加 CSS 前缀的配置。设置为使用最新的两个版本和全球使用率超过 1% 的浏览器。
"liveSassCompile.settings.formats": 编译输出格式的配置。这里设置为将编译后的 CSS 文件保存为扩展名为 .css 的文件，并指定保存路径为 ~/../css。【~/../css 指的是当前文件所在文件夹的上一文件夹下的css文件见】
"liveSassCompile.settings.excludeList": 排除列表的配置。
"liveSassCompile.settings.generateMap": 是否生成 CSS Source Map 文件的配置。
1.4 初体验
- 创建 css、sass、index.html
- 在 sass / css.scss 文件下编写
$baseColor: red; p { color: $baseColor; display: flex; }
- 点击，之后会生成 css.css 文件于 css 文件夹
- 这就是生成的 css 文件，注意 index.html 中样式文件就是引入该文件
② Sass 语法扩张 ✅
2.1 选择器嵌套
index.scss
.container{ .left { background-color: blue; } .right { background-color: green; } }
转为 css 后
index.css
.container .left { background-color: blue; } .container .right { background-color: green; } /*# sourceMappingURL=index.css.map */
2.2 父选择器 &
基础的使用
动态类名
.button { &-primary { background-color: blue; } &-secondary { background-color: green; } }
转为 css 后
index.css
.button-primary { background-color: blue; } .button-secondary { background-color: green; } /*# sourceMappingURL=index.css.map */
结合 & 和伪类选择器
.button { &:hover { background-color: red; } &:active { background-color: #ccc; } }
转为 css 后
index.css
.button:hover { background-color: red; } .button:active { background-color: #ccc; } /*# sourceMappingURL=index.css.map */
使用 & 与其它选择器组合，创建多重选择器
.button { &.large { font-size: 20px; } }
转为 css 后
index.css
.button.large { font-size: 20px; } /*# sourceMappingURL=index.css.map */
在嵌套结构中使用@at-root指令生成平级的选择器
.parent { font: { weight: 900; } .good { background-color: blue; } .child { color: red; .sub { color: blue; @at-root .new-selector { color: red; } } } }
转为 css 后
index.css
.parent { font-weight: 900; } .parent .good { background-color: blue; } .parent .child { color: red; } .parent .child .sub { color: blue; } .new-selector { color: red; } /*# sourceMappingURL=index.css.map */
2.3 属性嵌套
可以使用嵌套来组织 CSS 属性
语法
.container { width: 100%; height: 200px; padding: { top: 10px; right: 20px; bottom: 10px; left: 20px; } font: { weight: bold; size: 16px; family: Arial, sans-serif; } }
转为 css 后
index.css
.container { width: 100%; height: 200px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; font-weight: bold; font-size: 16px; font-family: Arial, sans-serif; } /*# sourceMappingURL=index.css.map */
2.4 占位符选择器 %foo
2.4.1 占位符选择器 %foo 有什么好处
继承样式
通过 @extend 关键字，它可以把占位符选择器变成样式的基础，避免了无穷无尽的重复编写相似的样式规则，就像是给代码穿上了可维护性的外套。
避免生成多余的 CSS代码
使用占位符选择器，它不会变成实际的 CSS 选择器，只有在被 @extend 引用的时候才会真正起作用。这样一来，就减少了生成的 CSS 文件的大小，让页面加载性能变得轻盈如鸟。不需要多余的CSS 代码。
避免与其他选择器冲突
占位符选择器的命名以 % 开头，与常规的 CSS 类选择器不同。这样可以避免与其他选择器冲突，减少样式命名的可能性。
CSS预处理器之Sass（二）：https://developer.aliyun.com/article/1556764
