sass 概要

2020-02-18 13:44:27 浏览数 (1)

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

宏定义

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

  1. 变量 sass中的变量适用于替换css中参数的值。例如：
代码语言：javascript复制

scss:

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

#box01 {
  margin: $basic-margin;
}

#box02 {
  margin: $basic-margin;
}

css:

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

#box02 {
  margin: "10px 20px";
}
  1. sass允许根据变量，选择性的输出css，类似于开关，例如：
代码语言：javascript复制
scss:

$rounded-corners: false;

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

css:

.button {
  border: 1px solid black;
}
  1. sass 也允许在子模块中给变量设置默认值，引用的时候可以再重新定义变量的值
代码语言：javascript复制
_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;
}
  1. 使用!global可以在局部环境中设置全局变量的值，例如:
代码语言：javascript复制
test.scss:

$color: red;

.text {
  $color: black !global;
}

.box {
  color: $color;
}

test.css:

.box {
  color: black;
}

  1. mixin sass中的mixin类似于支持参数的代码片段，可以很方便的将一段常用的代码片段插入到css规则中去，例如：
代码语言：javascript复制
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";
}
  2. 扩展与继承 sass中的扩展相当于不带参数的代码片段，适用于同一组件的不同状态，语法如下：
代码语言：javascript复制
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文件引用。例如：

代码语言：javascript复制
_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的语法做了一些简化，比如说：

  1. 嵌套 写scss子元素的规则不再另起一条规则，只需要嵌套在父元素中的规则中即可，例如：
代码语言：javascript复制
_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";
}
  1. 另一种方式的嵌套： 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更像一门编程语言而不是一遍作文。其中包括：

  1. 支持运算 css是不支持运算的，而在scss中可以做一些简单的运算，例如： scss: .box { width: 100px / 200px * 100%; } css: .box { width: 50%; }
  2. 数值类型 scss中的值分为以下几种类型：
    • 数字，例如： 20, 20px
    • 字符串，例如："IBM Plex Sans", bold
    • 颜色值，例如：#ffffff, blue
    • 布尔值, true, false
    • 列表，例如：0 20px 30px 40px
    • 字典，例如：("background": red, "foreground": pink)
  3. 操作符 scss中的操作符包括：
    • == , != : 判断两个值是否相等/不相等
    • - * / %
    • < <= > >=
    • and or not
    • - / 可用于字符串拼接
    • () 用于优先级设定
    • &父元素选择器
    • #{} 可以将sass表达式插入到css的文本中
  4. 代码注释
    • // 单行注释，不会编译到css中
    • /**/多行注释，一般会被编译进css
    • 压缩模式下，多行注释不会被编译进css，除非以/*!开头
    • ///为文档注释，不会被编译到css中，会被sassdoc工具使用，生成sass的文档
  5. 函数 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
  6. 流程控制
    • 分支 @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; }
  7. 数值类型 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

小结

本文简要的介绍了sass对css所做的一些增强，阐明了sass如何让css从简单的平铺式的书写方式演变成一种"编程语言"，希望读者可以在自己的前端项目中试一试sass，相信它会极大地提升你的开发效率。

阅读原文

css sass

0 人点赞