功能强大性能更佳的 Sass 常用指令

前言

我们在日常使用 Sass 的时候，大部分我们只需要用到属性嵌套就足以，但是这并不是 Sass 的灵魂所在。

比如说我们需要构建一套媒体查询的站点，此时页面上出现大量的 @media only screen and (min-width: 576px) 的代码，对于这样的代码是让人头疼的。

本文将介绍 Sass 中强大的指令，阅读完本文你将了解 Sass 中常见的指令，并且能够通过 Sass 指令去简化 @media only screen and (min-width: 576px) 代码的编写。

@import

导入 scss , 被导入的文件将合并编译在同一个 css 文件，同时也可以使用被导入的文件中所包含的变量和指令。

// styles/_mixins.scss
$red: red;
1
2

@import "./styles/mixins";

div {
  color: $red;
}
1
2
3
4
5

当然有些时候我们不希望被导入 sass 编译成 css，只需要在文件名前添加下划线，但是导入语句不需要添加下划线。

@media

和 css @media 的用法一致，但是允许在其 scss 中进行嵌套，让 @media 变得更加方便。

.box {
  color: red;
  @media only screen and (min-width: 576px) {
    color: yellow;
    h1 {
      border: 4px solid black;
    }
  }
  @media only screen and (min-width: 768px) {
    color: green;
  }
  @media only screen and (min-width: 992px) {
    color: blue;
  }
  @media only screen and (min-width: 1200px) {
    color: purple;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@extend

指定当前选择器继承指定的样式，一般应用于重复的样式，可以生成更少的代码。

<nav class="nav">
  <div class="nav__container">
    <span class="nav__item">1span>
    
    <span class="nav__item--active">2span>
  div>
nav>
1
2
3
4
5
6
7

.nav {
  background-color: steelblue;
  &__container {
    display: flex;
    justify-content: space-between;
  }
  &__item {
    color: white;
    &--active {
      @extend .nav__item;
      border-bottom: 1px solid red;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过 @extend 执行，我们值增加一个 active 的类，我们可以很好的消除 css 的冗余。同时也清除了 nav_item 的标记。

@mixin 和 @include

@mixin 一般和 @include 搭配使用，@mixmin 定义样式，@include 引用样式。

但是 @mixin 会生成更多重复的的代码，但是通过 gzip 压缩后的代码会更小。

@mixin button {
  font-size: 1em;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #fff;
}

.button-green {
  background-color: green;
  @include button;
}
1
2
3
4
5
6
7
8
9
10
11

@content

在使用 @include 的时候，将额外的样式导入 @mixin 中，@content 中就是接收的部分。

@mixin button {
  font-size: 1em;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #fff;
  @content;
}

.button-green {
  @include button {
    background: green;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

实现 Bootstrap 的断点功能

通过 @mixin 对 @media 媒体查询进行了简化，提高代码可读性和维护性。

$breakpoints: (
  "xs": "only screen and ( min-width: 576px )",
  "sm": "only screen and ( min-width: 768px )",
  "md": "only screen and ( min-width: 992px )",
  "lg": "only screen and ( min-width: 1200px )",
);

@mixin respond-to($breakpoint) {
  // 获取 map 对应 key 的 value
  $query: map-get($breakpoints, $breakpoint);
  // 判断是否存在
  @if not $query {
    // @error 抛出异常
    @error "No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.";
  }
  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}

body {
  background-color: red;
  @include respond-to(sm) {
    background-color: green;
  }
  @include respond-to(md) {
    background-color: yellow;
  }
  @include respond-to(lg) {
    background-color: purple;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

总结

@import、@extend 与 @mixin 都可以模块化 css 代码。

@extend 编译后的体积比 @mixin 大，但是 gzip 后 @mixin 的体积更小。

@mixin 更加的灵活，可以传递参数，更加推荐使用。

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！

如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！