css sass

Sass 概要

Posted on 2019-06-18,7 min read

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

宏定义

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

  1. 变量 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;
    }

  2. 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";
    }

  3. 扩展与继承 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的语法做了一些简化,比如说:

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

    scss:

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

    .bss {
    margin: $basic-margin;
    #dash {
    margin-top: 20px;
    padding-top: 20px;
    }
    .dash {
    margin-top: 20px;
    margin-bottom: 20px;
    }
    }

    css:

    .bss {
    margin: "10px 20px";
    }
    .bss #dash {
    margin-top: 20px;
    padding-top: 20px;
    }
    .bss .dash {
    margin-top: 20px;
    margin-bottom: 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更像一门编程语言而不是一遍作文。其中包括:

  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: append(prefixes, map-get($prefixes-by-browser, $browser));
      }
      @return $prefixes;
      }

      @debug prefixes-for-browsers("firefox" "ie"); // moz ms

下一篇: 获取隐藏元素的宽度→