前端知识点

配色方案

本页目录

SCSS 预处理器 ​

优点 ​

  • 变量 variables
  • 代码混入、继承 mixins、extend
  • 嵌套 nested rules
  • 代码模块化 modules
  • 支持运算符 +, -, *, /, %
  • 支持循环 for、each、while

变量 ​

  • $：定义变量
  • @import： 引入 css 变量
  • @mixin：定义混入的内容
  • @include：引入 @mixin 定义的混入
  • @content：当引入 mixin 时，@include 花括号中的内容可以用该关键字代替

混入示例

CSS
/* 基础 */
@mixin ellipsis {

}
.content {
    @inlude ellipsis;
}
/* 基础 */
@mixin ellipsis {

}
.content {
    @inlude ellipsis;
}
CSS
/* 传参 */
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
  }
}
p { @include sexy-border(blue, 1in); }
/* 传参 */
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
  }
}
p { @include sexy-border(blue, 1in); }

继承示例

CSS
.error {
    border: 1px #f00;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}
.error {
    border: 1px #f00;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}

注意：

  • @import "xx.scss" 导入的文件最终会被合并到一个单一的 CSS 文件

  • @import 不可以在混合指令 (mixin) 或控制指令 (control directives) 中使用

  • 可通过在文件前加 _ 导入不需要被编译的文件。如：@import("_reset.scss")

  • @extend 可以继承元素选择器

安装 sass 预处理器 ​

由于之前的 node-sass 与 node 版本相关，容易存在不兼容问题，目前推荐使用 sass ，

node-sass 替换为 dart-sass（官方新版已更名为 sass），无需再担心 node-sass 安装失败或者与 node 版本的匹配问题。