Sass 必会的功能

2022年02月21日 21:54 · 阅读 85

相信很多人都在用Sass，但所使用的Sass功能却很少，有点暴殄天物的意思。让我们好好了解下Sass的有必会会功能吧。

Sass 介绍

Sass官网的描述：“ Sass是世界上最成熟、稳定、强大的专业级CSS扩展语言。”

它兼容所有版本的css，在css的基础上提供了变量、混入、函数、规则等特性，提高样式文件编写效率以及提高可维护性。相比较与其它的css扩展语言，有着更丰富的特性，以及更悠久的历史，有着超过15年时间专业团队的打磨。

必会特性

常规的特性就不一一列出了，比如可嵌套，支持变量等

@mixins 和 @include

@mixins允许你定义可以在整个样式表中重复使用的样式。@include 则可以消费@mixins定义的样式。两个配合可以使你减少编写很多重复的样式，提高效率。

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list; // 支持嵌套 
  li {
    display: inline-block;
  }
}

nav ul {
  @include horizontal-list;
}

编译为=>

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}

支持参数传递

@mixin fixed($top, $left, $height, $width) {
    position: fixed;
    top: $top;
    left: $left;
    height: $height;
    width: $width;
}

.sidebar {
  @include fixed(0, 0, 100vh, 200px);
}

编译为=>

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 200px;
}

流程控制

Sass提供了四种流程控制，来更精确的控制每一种变化，分别是 @if 和 @else、@for、@each、@while

@if 和 @else

语法: @if <表达式> { ... } @else if <表达式> {} @else { ... }

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: $size / 2;

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else {
    border-right-color: $color;
  } 
}

.next {
  @include triangle(5px, black, right);
}

编译为=>

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

@for

语法: @for <变量> form <表达式> to <表达式> { ... } 或者 @for <变量> from <表达式> through <表达式> { ... }

@for $i from 1 through 3 {
  .width-#{$i} {
     width: $i * 10px
  }
}

编译为=>

 .width-1 {
     width: 10px;
 }
 .width-2 {
     width: 20px;
 }
 .width-3 {
     width: 30px;
 }

@each

语法: @each <变量> in <表达式> { ... }

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

编译为=>

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

@while

语法：@while <表达式> { ... }

@use "sass:math";

@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

sup {
  font-size: scale-below(20px, 16px);
}

编译为=>

sup {
  font-size: 12.36094px;
}

@function

在Sass中也能像js 一样使用函数，来抽离一些比较复杂的且需要复用的计算任务

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

编译为=>

.micro {
  width: 180px;
}

@extend

平常在编写样式的时候，经常会出现某一个类和另一个类拥有大部分相同的样式，只有部分不同，特别是在这两个类还存在一定关系的时候，那么使用@extend就很方便

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

编译为=>

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

@at-root

语法：@at-root <selector> { ... }

在使用嵌套的时候，不想让某个类限制在父级之下，而直接输出到文档根层级上，使用@at-root就可以做到

.parent {
    color: red;
    @at-root .child {
        color: green
    }
}

编译为=>

.parent {
    color: red;
}
.child { 
    color: green
}

但是要注意 @at-root默认情况下不能跳出指定的规则，比如@media，需要跳出需要使用@at-root (without: media){ ... }

@media print {
  .parent {
    width: 100px;
    // 能够跳出 @media
    @at-root (without: media) {
     .child { 
          color: #111;
     }
    }
    // 不能跳出 @media 只能跳出嵌套
     @at-root .child{
       color: #222
     }
  }
}

编译为=>

@media print {
  .parent {
    width: 100px;
  }
  /** 不能跳出 @media 只能跳出嵌套 */
  .child{
    color: #222
  }
}

/** 能够跳出 @media */
.page {
  color: #111;
}

最后

学会利用这些特性合理组合将能够大大减少开发时间，提高开发效率!

以上列出的只是Sass一部分比较常用的特性，更详细的请去Sass官网有更详细的介绍，如果本文有错误欢迎指正，谢谢!