Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

Commonly used Sass commands with powerful functions and better performance

No two blogs 2022-11-24 23:37:20 阅读数:7 评论数:0 点赞数:0 收藏数:0

前言

我们在日常使用 Sass 的时候,Most of us only need to use attribute nesting,但是这并不是 Sass 的灵魂所在.

For example, we need to build a set of media queries for the site,At this time, a large number of @media only screen and (min-width: 576px) 的代码,For such code is a headache.

本文将介绍 Sass powerful commands,After reading this article you will understand Sass 中常见的指令,并且能够通过 Sass instruction to simplify @media only screen and (min-width: 576px) 代码的编写.

@import

导入 scss , The imported files will be merged and compiled into one css 文件,It is also possible to use variables and directives contained in the imported file.

// styles/_mixins.scss
$redred;
@import "./styles/mixins";

div {
  color: $red;
}

Of course sometimes we don't want to be imported sass 编译成 css,只需要在文件名前添加下划线,But import statements do not need to be underlined.

@media

css @media 的用法一致,But allowed in it 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

Specifies that the current selector inherits the specified style,Generally used for repeated styles,Can generate less code.

<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 执行,Our value increases by one active 的类,We can eliminate it very well css 的冗余.同时也清除了 nav_item 的标记.

@mixin 和 @include

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

但是 @mixin Will generate more repetitive code,但是通过 gzip The compressed code will be smaller.

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

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

@content

在使用 @include 的时候,Import additional styles @mixin 中,@content is the receiving part.

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

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

实现 Bootstrap 的断点功能

通过 @mixin@media Media queries were simplified,提高代码可读性和维护性.

$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 Compiled volume ratio @mixin 大,但是 gzip@mixin 的体积更小.

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

最后

感谢你的阅读~

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

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

Copyright statement
In this paper,the author:[No two blogs],Reprint please bring the original link, thank you

飞链云3D数字艺术品
30万现金开奖等你来领