10 个很棒的 SASS（SCSS）混合
介绍
第一篇帖子，我来了！！🚀 让我见鬼去吧🔥。
这是我们在Jam3中使用最频繁的强大 sass (scss) mixins 的集合，还有一些我发现很有用的。mixins 基本上是返回 CSS 代码块的函数，它们非常强大，可以使代码更简洁，并加快开发速度。它们不仅适用于 sass，例如，css-in-js 爱好者也可以用它们创建辅助函数。
| 您可以使用此菜单跳过。
让我们深入了解细节
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