10 个很棒的 SASS（SCSS）混合

介绍

第一篇帖子，我来了！！🚀 让我见鬼去吧🔥。

这是我们在Jam3中使用最频繁的强大 sass (scss) mixins 的集合，还有一些我发现很有用的。mixins 基本上是返回 CSS 代码块的函数，它们非常强大，可以使代码更简洁，并加快开发速度。它们不仅适用于 sass，例如，css-in-js 爱好者也可以用它们创建辅助函数。

| 您可以使用此菜单跳过。

1.盒子
2. Flexbox 工具包
3.字体大小
4. 字体
5.封面背景
6.伪
7.媒体查询
8. z-index 处理
9. 可见性
10.背景过渡

让我们深入了解细节

1.盒子

让我们从一个简单但流行的方法开始，一次性定义宽度和高度。

@mixin box($width, $height: $width) {
  width: $width;
  height: $height;
}

/* ===== Usage ===== */
div {
  // You can pass width && height
  @include box(200px, 300px);
  /* or just pass width and the height
     will default to the width value */
  @include box(200px);
}

2. Flexbox 工具包

Flexbox 和 CSS 网格一起接管了前端布局。这是一组混合宏，可以用来快速开发，它们的名称非常直观，我经常使用它们，因为我总是忘记哪个代表主轴，哪个代表横轴。

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-center-column {
  @include flex-center;
  flex-direction: column;
}

@mixin flex-center-vert {
  display: flex;
  align-items: center;
}

@mixin flex-center-horiz {
  display: flex;
  justify-content: center;
}

⚠️ 一个警告是，由于 flexbox 作为轴和基础系统工作，如果 flex 方向发生变化，我们将交换轴，因此您将需要使用相反的方向，例如：

/* ===== Usage ===== */
.vertical-centered-element {
  @include flex-center-vert;
}

.horizontally-centered-element {
  flex-direction: column;
  @include flex-center-vert;
}

💡作为练习，你可以尝试构建css grid这些的等价物。

3.字体大小

这是我最喜欢的代码之一，因为它可以在多个地方减少两行代码，让代码更简洁。它一次性设置了font-size、line-height和，并且默认为和。它还保持了 line-height 无单位，这一点我很喜欢。letter-spacingnormalline-heightletter-spacing

您可以根据您使用的单位类型调整这些混合，例如，您可以使用基于 rem 的字体系统来完成这项工作。

@mixin font-size($font-size, $line-height: normal, $letter-spacing: normal) {
  font-size: $font-size * 1px;
  // font-size: $font-size * 0.1rem;
  // example using rem values and 62.5% font-size so 1rem = 10px

  @if $line-height==normal {
    line-height: normal;
  } @else {
    line-height: $line-height / $font-size;
  }

  @if $letter-spacing==normal {
    letter-spacing: normal;
  } @else {
    letter-spacing: #{$letter-spacing / $font-size}em;
  }
}

/* ===== Usage ===== */
p {
  @include font-size(12, 18, 1.2);
  // returns
  font-size: 12px;
  line-height: 1.5; // 18 / 12
  letter-spacing: 0.1em;
}

4. 字体

这只是font-face通过一个命令快速添加所有源（嵌入式 OpenType、WOFF、TrueType 和 SVG），对于具有多种字体类型和粗细的大型网站非常有用。

@mixin font-face($font-name, $path, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($path+".eot");
    src: url($path+".eot?#iefix") format("embedded-opentype"), url($path+".woff")
        format("woff"), url($path+".ttf") format("truetype"), url($path+".svg##{$font-name}")
        format("svg");
    font-weight: $weight;
    font-style: $style;
  }
}

/* ===== Usage ===== */
@include font-face(Roboto, "./assets/Roboto", normal, normal);

5.封面背景

再次节省两行代码😄这次为元素添加封面背景

@mixin cover-background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* ===== Usage ===== */
div {
  background-image: url("cute-doggo.png");
  @include cover-background;
}

6.伪

这是我在图像遮罩中经常使用的混合器，但其主要目的是为了减少行数，因为在执行伪元素时有很多重复；

@mixin pseudo(
  $width: 100%,
  $height: 100%,
  $display: inline-block,
  $pos: absolute,
  $content: ""
) {
  content: $content;
  display: $display;
  position: $pos;
  @include box($width, $height);
}

/* ===== Usage ===== */
div {
  position: relative;
  width: 200px;
  height: 200px;

  &:after {
    @include pseudo(100px, 100px);
  }
}

7.媒体查询

@media由于我每次都必须谷歌语法，因此这个 mixin 可以方便地处理断点，并根据需要添加更多断点。

$tablet: 768;
$large: 1024;
$desktop: 1280;

@mixin tablet {
  @media only screen and (min-width: $tablet * 1px) {
    @content;
  }
}

@mixin large {
  @media only screen and (min-width: $large * 1px) {
    @content;
  }
}

@mixin desktop {
  @media only screen and (min-width: $desktop * 1px) {
    @content;
  }
}

/* ===== Usage ===== */
h1 {
  font-size: 10px;

  @include tablet {
    font-size: 12px;
  }

  @include desktop {
    font-size: 20px;
  }
}

8. z-index 处理

非常简单的混合，可以从中心位置控制所有 z 索引。

首先，我们必须定义数组中的所有元素，其中优先级向右增加
其次，我们使用indexscss 实用函数来查找该数组的索引。

相当简单。

$elements: landing, header, modal, very-important-modal;

@mixin z-index($id) {
  z-index: index($elements, $id);
}

⚠️正如你现在可能想到的，这并不能解决你所有的问题，因为 z-index 尊重元素的堆叠顺序，例如在这种情况下，下面的元素div2仍然会位于顶部，div1 > child但这是一个不错的解决方案

.div1 {
  z-index: 2;

  .child {
    z-index: 5000;
  }
}

.div2 {
  z-index: 3; // This will still show on top of div1 > child
}

💻这里有一个例子：

⚠️此外，z-index 仅适用于定位元素，因此如果您的网站中的所有内容都static不太可能，那么一切都很好，这个 mixin 将是纯金，如果不是，您必须小心并检查元素的堆叠。

9. 可见性

快速混合隐藏或显示元素，适用于淡入/淡出动画

@mixin fade($type) {
  @if $type== "hide" {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
  } @else if $type== "show" {
    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s;
  }
}

10.背景过渡

这个更像是一个有趣的混合，可重用性不高，但我喜欢按钮中的这种转换，这是一种展示混合力量的方式，并鼓励你建立自己的混合，并有点疯狂。

@mixin skew-background-transition($initial, $hover, $inverted: false) {
  background: linear-gradient(
    90deg,
    $hover 0%,
    $hover 50%,
    $initial 50%,
    $initial 100%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;

  background-position: right bottom;
  @if $inverted {
    background-position: left bottom;
  }
  transition: background-position 0.25s ease-out;

  &:hover {
    background-position: left bottom;
    @if $inverted {
      background-position: right bottom;
    }
  }
}

💻这里有一个这个 mixin 的例子：

结论

希望这些 mixin 对你有所帮助。你应该挑战自己，根据需求创建新的 mixin。如果你重复多次，这可能是个好机会来验证 mixin 能否解决这个问题。由于 mixin 本身的特性，它可能会有很大的变化，所以你应该确保你的团队理解其语法和细节。

我还把本文中介绍的所有内容都放在了 Codepen 中，作为游乐场，以便各位想玩玩的朋友们

参考文献 | 有用链接

Sass 文档
Bourbon Tool Set - 包含额外 scss 工具的大型工具库

合作者

Jam3的所有人都曾在某个时候接触过这些混合。

文章来源：https://dev.to/alemesa/10-awesome-sass-scss-mixins-5ci2