sass 概要

用户1214695

发布于 2020-02-18 13:44:27

9110

发布于 2020-02-18 13:44:27

文章被收录于专栏：三木的博客三木的博客

前端开发中最大的坑之一莫过于写css，流水账式的写法让众多码农们头痛不已。好在有了sass，写css不再死板。sass对css的增强如下：

宏定义

宏定义的优点在于一处定义，多处使用，需要修改的时候只需要修改定义的地方即可。虽然sass没有明确的说明，但其实以下几种语法与C语言中的宏定义非常类似：

变量 sass中的变量适用于替换css中参数的值。例如：


scss:

$basic-margin: "10px 20px";

#box01 {
  margin: $basic-margin;
}

#box02 {
  margin: $basic-margin;
}

css:

#box01 {
  margin: "10px 20px";
}

#box02 {
  margin: "10px 20px";
}

sass允许根据变量，选择性的输出css，类似于开关，例如：

scss:

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

css:

.button {
  border: 1px solid black;
}

sass 也允许在子模块中给变量设置默认值，引用的时候可以再重新定义变量的值

_module.scss:

$userColor: red !default;

.bass {
  padding: 0 20px;
  color: $userColor;
}

test.scss:

$userColor: black;
@import "module";

test.css:

.bass {
  padding: 0 20px;
  color: black;
}
test.scss:

@import "module";

test.css
.bass {
  padding: 0 20px;
  color: red;
}

使用!global可以在局部环境中设置全局变量的值，例如:

test.scss:

$color: red;

.text {
  $color: black !global;
}

.box {
  color: $color;
}

test.css:

.box {
  color: black;
}

mixin sass中的mixin类似于支持参数的代码片段，可以很方便的将一段常用的代码片段插入到css规则中去，例如：

scss:

@mixin normal-font($fontfamily) {
  font-size: 18px;
  font-family: $fontfamily;
}

.box {
  width: 200px;
  height: 200px;
  @include normal-font("IBM Plex Sans");
}

css:

.box {
  width: 200px;
  height: 200px;
  font-size: 18px;
  font-family: "IBM Plex Sans";
}

扩展与继承 sass中的扩展相当于不带参数的代码片段，适用于同一组件的不同状态，语法如下：

scss:

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

css:

.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

模块化

sass也借鉴了编程语言中的模块化思想，允许文件引入。以下划线开头的文件类似于子模块，不会被被sass编译为css，只能被其他scss文件引用。例如：

_module.scss:

.bass {
  padding: 0 20px;
}

test.scss:

@import "module";

$basic-margin: "10px 20px";

#box01 {
  margin: $basic-margin;
}

#box02 {
  margin: $basic-margin;
}

test.css:

.bass {
  padding: 0 20px;
}

#box01 {
  margin: "10px 20px";
}

#box02 {
  margin: "10px 20px";
}

语法简化

scss也对css的语法做了一些简化，比如说：

嵌套写scss子元素的规则不再另起一条规则，只需要嵌套在父元素中的规则中即可，例如：

_module.scss:

.bass {
  padding: 0 20px;
}

test.scss:

@import "module";

$basic-margin: "10px 20px";

#box01 {
  margin: $basic-margin;
}

#box02 {
  margin: $basic-margin;
}

test.css:

.bass {
  padding: 0 20px;
}

#box01 {
  margin: "10px 20px";
}

#box02 {
  margin: "10px 20px";
}

另一种方式的嵌套： scss： .box { margin: { top: 20px; bottom: 10px; right: 10px; left: 20px; } } css: .box { margin-top: 20px; margin-bottom: 10px; margin-right: 10px; margin-left: 20px; }

可编程化

sass也做了一些工作让css更像一门编程语言而不是一遍作文。其中包括：

支持运算 css是不支持运算的，而在scss中可以做一些简单的运算，例如： scss: .box { width: 100px / 200px * 100%; } css: .box { width: 50%; }
数值类型 scss中的值分为以下几种类型：
- 数字，例如： 20, 20px
- 字符串，例如："IBM Plex Sans", bold
- 颜色值，例如：#ffffff, blue
- 布尔值, true, false
- 列表，例如：0 20px 30px 40px
- 字典，例如：("background": red, "foreground": pink)
操作符 scss中的操作符包括：
- == , != : 判断两个值是否相等/不相等
- + - * / %
- < <= > >=
- and or not
- + - / 可用于字符串拼接
- () 用于优先级设定
- &父元素选择器
- #{} 可以将sass表达式插入到css的文本中
代码注释
- // 单行注释，不会编译到css中
- /**/多行注释，一般会被编译进css
- 压缩模式下，多行注释不会被编译进css，除非以/*!开头
- ///为文档注释，不会被编译到css中，会被sassdoc工具使用，生成sass的文档
函数 scss中的函数主要用于数值计算，例如： scss: @function pow($base, $exponent) { $result: 1; @for $_ from 1 through $exponent { $result: $result * $base; } @return $result; } .sidebar { float: left; margin-left: pow(4, 3) * 1px; } css: .sidebar { float: left; margin-left: 64px; } Sass中的内建函数详见 https://sass-lang.com/documentation/functions
流程控制
- 分支 @if , @else, @else if 例如： scss: @mixin triangle($color, $size, $direction) { display: block; height: 0; width: 0; border: $size/2 solid transparent; @if $direction == up { border-bottom-color: $color; } @else if $direction == down { border-top-color: $color; } @else if $direction == left { border-right-color: $color; } @else if $direction == right { border-left-color: $color; } @else { @error "wrong direction: #{$direction}"; } } .next { @include triangle(green, 20px, right); } css: .next { display: block; height: 0; width: 0; border: 10px solid transparent; border-left-color: green; }
- 循环 @each @for @while 例如： scss: $sizes: 40px, 50px, 80px; @each $size in $sizes { .icon-#{$size} { font-size: $size; height: $size; width: $size; } } css: .icon-40px { font-size: 40px; height: 40px; width: 40px; } .icon-50px { font-size: 50px; height: 50px; width: 50px; } .icon-80px { font-size: 80px; height: 80px; width: 80px; } scss: $base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } css: ul:nth-child(3n + 1) { background-color: #004080; } ul:nth-child(3n + 2) { background-color: #004d99; } ul:nth-child(3n + 3) { background-color: #0059b3; } scss: @function scale-below($value, $base, $ratio: 1.618) { @while $value > $base { $value: $value / $ratio; } @return $value; } $normal-font-size: 16px; sup { font-size: scale-below(20px, 16px); } css: sup { font-size: 12.36094px; }
数值类型 sass中的数值类型包括以下几种：数值，字符串，颜色，List, Map，布尔值，null及函数
- 数值包含数字和单位，sass的强大之处在于支持带单位的运算，例如： @debug 1in + 6px; // 102px or 1.0625in
- list和map的用法举例： $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms); @function prefixes-for-browsers($browsers) { $prefixes: (); @each $browser in $browsers { $prefixes: append($prefixes, map-get($prefixes-by-browser, $browser)); } @return $prefixes; } @debug prefixes-for-browsers("firefox" "ie"); // moz ms