Sass Mixins（保持样式表干燥） _Sass

本文概述

媒体查询
颜色主题
居中元素
Clearfix
一致的字体大小
动画
视网膜图像
快速渐变
外部字体
快速填充和边距
本文总结

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

文章图片
这些是我使用的Sass mixins, 几乎用于我从事的每个Web项目。整个网络上有很多有趣的文章, 其中包含一些有用的Sass mixins。还有一些不错的Sass mixin库, 非常适合诸如Bourbon之类的较小任务。我从下面派生了一些mixin的另一个很棒的mixin库是Andy。
我将在本文中介绍的mixins处理以下内容：

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

媒体查询媒体查询使你可以轻松地将自定义断点添加到样式表, 并快速在元素内为不同的断点添加自定义响应行为。但是, 乱扔样式表媒体查询会很快成为导致头痛的原因, 尤其是在使它们持续运转时。使用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中使用的媒体点是：

最大宽度：767像素(任何屏幕宽度最大为767像素)
最小宽度：768像素(任何大于768像素宽的屏幕)
最小宽度：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; }

居中元素

文章图片
根据你的布局, 有多种方法可以使样式中的元素居中对齐。下面的方法使用绝对定位, 将允许你定义垂直, 水平或两个居中元素。父元素将需要具有位置：相对。这使你可以轻松地在短两行代码中定义元素的居中位置。

@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属性, 无需此混合即可轻松完成简单的文本和容器对齐。在创建布局以及使用其他容器内部的容器时, 这一功能将为你提供更多帮助。
Clearfix 快速有效地将clearfix css属性应用于元素。网上有很多clearfix解决方案, 而这似乎效果最好。一旦创建了Sass 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) }

对于不支持rem(IE8及更低版本)的浏览器, 此mixin还会创建像素后备。当浏览器不支持大小调整时, mixin将计算你设置的初始rem大小的像素当量, 并输出元素的pixel和rem值。
动画

文章图片
快速定义动画属性并将其添加到元素中。当前, animation 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的第一部分将添加浏览器兼容性所需的正确的供应商前缀。下一节将对其进行设置, 以输入你的自定义字符串和属性。混合的最后一部分是创建混合名称(在本例中为淡出)并定义动画中每个关键帧发生的情况。此示例设置非常基础, 你可以将更改添加到动画持续时间的任意百分比。

// 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; } }

此混合将使你可以在与定义原始图像的CSS属性相同的位置添加规则。

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

以前, 唯一的CSS解决方案是使用媒体查询, 而且该解决方案更加简洁方便。有关此混合的更多想法和想法, 请查看本文。
快速渐变轻松添加仅定义开始颜色, 结束颜色和渐变类型的渐变。添加所有渐变属性, 然后可以根据需要选择。渐变类型允许你从垂直渐变, 水平渐变或径向(球形)渐变中选择。

@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'); }

外部字体 【Sass Mixins（保持样式表干燥）】使用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; } }

该混合将谨慎定义备用字体格式URL, 包括向后兼容所需的奇怪解决方法。
快速填充和边距我使用它的主要原因是因为我将省略特定的padding属性, 例如有时不使用padding-left, 并且我不想对其进行定义。使用Sass属性null, 可以省略padding属性。相同的规则适用于保证金。

//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- *属性。你可以在任何元素中快速包括该混合, 并且仅定义要包括的填充/边距的边。填充和边距是添加到元素中的最常用的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 mixins是使工作流程更高效的好方法。这些特定的mixins将帮助你减少在常见Web任务上的时间, 从而使你有更多时间专注于需要更仔细和熟练的洞察力的项目其他方面。
安装和使用Sass可以通过多种方式完成, 并且将涉及使用命令提示符在项目中安装一些库。安装Sass的一种方法是使用Ruby(如此处的Sass主要网站所述), 另一种流行的方法是使用Node.js。
Sass的好处不仅限于自动化, 还可以帮助你轻松创建和管理项目样式表。即使是一些最基本的Web项目, 也可以包含数千行CSS代码。 Sass是将这段代码分解为更易于管理的位的好方法, 每个位都有自己的焦点。
相关：Sass样式指南：有关如何编写更好的CSS代码的Sass教程