Sass Mixins：保持样式表干燥

已发表: 2022-03-11

我最喜欢使用 Sass 的好处之一是它使前端设计工作流程的自动化变得轻而易举。 有许多 JavaScript 工具可用于处理文件和自动执行其他任务，但 Sass 内置的 mixin 功能允许编写模块化前端样式代码。 在本文中，我列出了十个我最喜欢的用于自动编写 Web 样式的 Sass mixin。

Sass Mixins：保持样式表干燥

这些是我几乎用于我从事的每个 Web 项目的 Sass mixin。 网络上有许多有趣的文章，其中包含一些有用的 Sass mixin。 还有一些优秀的 Sass 混合库非常适合小型任务，例如 Bourbon。 另一个很棒的 mixin 库，我从中派生了一些 mixin，它是 Andy。

我将在本文中介绍的 mixin 涉及以下内容：

  • 媒体查询
  • 颜色主题
  • 居中元素
  • 清除修复
  • 一致的字体大小
  • 动画过渡
  • 视网膜图像
  • 快速渐变
  • 外部字体
  • 快速填充/边距

媒体查询

媒体查询允许您轻松地将自定义断点添加到样式表，并在元素内快速添加自定义响应行为以用于不同的断点。 然而，乱扔样式表媒体查询很快就会成为令人头疼的原因，尤其是在维护它们的路上。 使用 Sass mixins，这一切都可以改变。

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

定义这些后，可以按如下方式使用 mixin：

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

它可以独立使用，也可以与 Bootstrap 等其他网格框架一起使用。

if 语句将发出一个媒体查询，根据提供给 mixin 的尺寸名称调整到特定的屏幕尺寸。 这将允许您轻松地相应地调整 CSS 属性的行为。 您还可以自定义要调整 CSS 属性的点。 通常，响应速度最快的布局会坚持使用 3 或 4 个定义的屏幕宽度尺寸来调整内容。 屏幕尺寸、设备和应用程序的差异一直在扩大，但许多 Web 开发人员会在他们的布局中使用一种流行趋势； 手机的小屏幕尺寸，平板电脑的中等尺寸，笔记本电脑的大屏幕尺寸，台式电脑的超大尺寸。

作为参考，Bootstrap v3 中使用的媒体点是：

  • 最大宽度：767px（任何屏幕宽度不超过 767px）
  • 最小宽度：768px（任何超过 768px 宽的屏幕）
  • 最小宽度：992px（任何大于 992px 宽的屏幕）
  • 最小宽度：1200 像素（任何屏幕宽度超过 1200 像素）

颜色主题

定义在整个站点中使用的颜色主题有助于节省在相同 HTML 元素上使用相同颜色的 CSS 部分的时间。 如果您希望所有 div 按钮都有一个 1px 实心虚线边框，那么您可以轻松地将其添加到您的主题中。 这个 Sass mixin 将允许您设置任意数量的颜色变量，并影响任意数量的类。 这可能是一个有用的工具，可以为某些东西提供颜色选项，或者任何时候你有一个功能可以同时影响许多元素的颜色。 这里有一篇很棒的文章，其中包含有关在 Sass 中使用颜色主题的更多信息。

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

一旦你设置了一个深入的颜色主题，如果做得好，你将消除 70% 的与颜色相关的样式。 我还建议将此 .scss 文件与其他 .scss 文件分开，并将所有品牌颜色变量包含在同一个文件中。

简单的一行：

 @include theme(theme-banana, yellow);

将发出：

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

居中元素

根据您的布局，有许多不同的方法可以使您的样式中的元素居中对齐。 下面的方法使用绝对定位，并允许您定义垂直、水平或两者居中的元素。 父元素需要有位置：相对。 这使您可以在短短的 2 行代码中轻松定义元素的居中位置。

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }
 .foo { @include center(both); } .foo-parent { position: relative; }

这个 mixin 是最通用的内容居中方式之一，但值得注意的是，有许多不同的方式可以让你的内容居中，这可能并不总是最好的解决方案。 根据您的布局风格和浏览器兼容性的允许，您可能希望以不同的方式居中您的内容。 Flexbox 是另一种流行且非常有用的对齐工具，尽管目前旧浏览器并不完全支持它。 使用简单的 css 属性，无需此 mixin 即可轻松完成简单的文本和容器对齐。 在创建布局和使用其他容器内的容器时，这会为您提供更多帮助。

清除修复

快速有效地将 clearfix css 属性应用于元素。 网络上有很多 clearfix 解决方案，而这个似乎效果最好。 一旦创建了 Sass mixin，它也很容易使用。

只要您的内容向右或向左浮动，并且想要清除浮动元素下方的空间以在下方插入新内容，此 mixin 就会受益。

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
 .container-with-floated-children { @extend %clearfix; }

一致的字体大小

在文档中设置 rem 字体大小，以用于所有文本元素。 这是放大和缩小字体而不是 em 的更好方法。 使用 em 将基于其他 CSS 属性进行复合，但 rem 只会根据您在 HTML 文档中定义的大小放大或缩小。 为您的所有排版分离一个 .scss 文件并使用以下 mixin 来定义您的默认字体大小将大大自动化您的排版编码工作流程。

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }
 p { @include font-size(14px) }

这个 mixin 还为不支持 rem（IE8 及以下）的浏览器创建了一个像素回退。 当浏览器不支持 rem 大小时，mixin 将计算您设置的初始 rem 大小的像素等效值，并输出元素的像素值和 rem 值。

动画

快速定义动画属性并将它们添加到您的元素中。 目前，动画 CSS 属性仍然需要供应商前缀，所以这也将添加到组合中。

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

mixin 的第一部分将添加浏览器兼容性所需的正确供应商前缀。 下一部分将其设置为输入您的自定义字符串和属性。 mixin 的最后一部分是您创建 mixin 名称（在本例中为淡出）并定义您希望在动画中的每个关键帧处发生的情况。 此示例设置非常基本，您可以对动画持续时间的任意百分比添加更改。

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

此处的示例将在动画的 0%（开始）处获取目标元素，并将属性从完全不透明度（不透明度：1;）转换为没有不透明度并在动画的 90% 处基本上消失（不透明度：0;） . 因此，如果我将动画设置为 5 秒时间轴，则元素将在 4.5 秒后消失（5 秒动画的 90%）。 我在使用 mixin 时定义的最后一个属性（“3”）是动画重复的次数。

视网膜图像

将高分辨率图像添加到您的站点，并为不显示高分辨率图像的设备提供备用方案。 使用视网膜图像时，我建议尽可能压缩而不破坏图像。 一个很好的工具是 TinyPNG（支持 PNG 和 JPG）。

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

这个 mixin 将允许您在与定义原始图像的 CSS 属性相同的位置添加规则。

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

以前，唯一的 CSS 解决方案是使用媒体查询，而这个解决方案更加简洁和容易。 有关此 mixin 的更多想法和想法，请查看本文。

快速渐变

轻松添加仅定义开始颜色、结束颜色和渐变类型的渐变。 添加所有渐变属性，您可以根据需要进行选择。 渐变类型允许您从垂直渐变、水平渐变或径向（球形）渐变中进行选择。

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

您不再需要记住用于实现渐变的各种供应商前缀和参数顺序。

 .foo { @include background-gradient(red, black, 'vertical'); }

外部字体

使用 CSS font-face 属性，我们可以轻松地在目录中添加字体并包含所有字体类型。 使用字体文件时，不同的浏览器对文件类型的兼容性不同。 这个 mixin 通过使用目录中的任何相关字体文件来帮助解决这个问题。

只需将任何字体文件包含在一个目录中，然后在您的样式中添加“@include”标签，它将从您选择的文件夹中获取所有文件。

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

这个 mixin 将负责定义备用字体格式 URL，包括向后兼容所需的奇怪解决方法。

快速填充和边距

我使用它的主要原因是因为我会省略一个特定的填充属性，例如 padding-left 有时，我不想定义它。 使用 Sass 属性 null，您可以省略填充属性。 相同的规则适用于边距。

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

然后可以使用混合来替换整个样式表中的一堆 padding-* 和 margin-* 属性。 您可以快速将此 mixin 包含在任何元素中，并仅定义要包含的边距/边距。 内边距和边距是添加到元素中最常用的 CSS 样式之一，像这样节省时间的小工具很快就会加起来。

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

包起来

使用本文中概述的 Sass mixin 是提高工作流程效率的好方法。 这些特定的 mixin 将帮助您在常见的 Web 任务上花费更少的时间，让您有更多的时间专注于需要更仔细和熟练的洞察力的项目的其他方面。

可以通过多种方式安装和使用 Sass，并且将涉及使用命令提示符在项目中安装一些库。 安装 Sass 的一种方法是使用 Ruby（如 Sass 主网站上所述），另一种流行的方法是使用 Node.js。

Sass 的好处不仅限于自动化，还有助于轻松创建和管理项目样式表。 即使是一些最基本的 Web 项目也可能有数千行 CSS 代码。 Sass 是将代码分解为更易于管理的部分的好方法，每个部分都有自己的重点。

相关： Sass 风格指南：关于如何编写更好的 CSS 代码的 Sass 教程