不二博客

V1

2022/11/24阅读:21主题:山吹

功能强大性能更佳的 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
$redred;
@import "./styles/mixins";

div {
  color: $red;
}

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

@media

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

.box {
  color: red;
  @media only screen and (min-width576px) {
    color: yellow;
    h1 {
      border4px solid black;
    }
  }
  @media only screen and (min-width: 768px) {
    colorgreen;
  }
  @media only screen and (min-width: 992px) {
    colorblue;
  }
  @media only screen and (min-width: 1200px) {
    colorpurple;
  }
}

@extend

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

<nav class="nav">
  <div class="nav__container">
    <span class="nav__item">1</span>
    <!-- 这里只是用了 nav__item--active 的样式 -->
    <span class="nav__item--active">2</span>
  </div>
</nav>
.nav {
  background-color: steelblue;
  &__container {
    display: flex;
    justify-content: space-between;
  }
  &__item {
    color: white;
    &--active {
      @extend .nav__item;
      border-bottom1px solid red;
    }
  }
}

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

@mixin 和 @include

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

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

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

.button-green {
  background-color: green;
  @include button;
}

@content

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

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

.button-green {
  @include button {
    background: green;
  }
}

实现 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
  $querymap-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-coloryellow;
  }
  @include respond-to(lg) {
    background-colorpurple;
  }
}

总结

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

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

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

最后

感谢你的阅读~

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

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

分类:

前端

标签:

CSS

作者介绍

不二博客
V1