文档

scss 支持

以.scss 为后缀。Mipocde 会自动将 scss 转换为 css 代码。

变量

scss 以$符开头来声明变量，如下所示，声明了一个$primary-color 变量值为#ff0000，那么在之后写 scss 代码时，则可以使用这个变量。

scss

$primary-color: #ff0000;
body {
  background-color: $primary-color;
}

编译后的 css 代码

body {
  background-color: #ff0000;
}

嵌套

scss 中可以使用嵌套来帮助我们组织 css 结构。

scss

body {
  p {
    color: red;
  }
}

编译后的 css

body p {
  color: red;
}

引用父级选择器&

scss 使用 & 关键字在 css 规则中引用父级选择器。例如嵌套使用伪类选择器

scss

a {
  font-size: 16px;
  color: red;
  &:hover {
    color: blue;
  }
}

编译后的 css

a {
  font-size: 16px;
  color: red;
}
a:hover {
  color: blue;
}

混合

混合用来在页面中复用 css 声明，同时可以传递变量参数。例如添加浏览器兼容前缀

scss

@mixin border-radius($radius) {
  border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

编译后的 css

.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}