使用 SASS Mixin 编写 clean code

2021年11月21日 阅读数:6
这篇文章主要向大家介绍使用 SASS Mixin 编写 clean code,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

毫无疑问,Sass 最强大和最有价值的特性之一是可以将现有代码打包成称为 mixins 的​​可重用代码块​​。css

Mixins are like macros

Mixin 是其余编程语言中宏的 Sass 等价物。 若是您以前编程过,您能够将它们视为函数、过程或方法,但它们在技术上不是这些概念中的任何一个,由于它们的功能是在编译时生成代码,而不是在运行时执行代码。html

How Mixins Work

Compass由SASS的核心团队成员Chris Eppstein建立,是一个很是丰富的样式框架,包括大量定义好的mixin,函数,以及对SASS的扩展。css3

Compass 项目充满了mixin,让你的生活更轻松。 从 CSS3,到排版,到布局,再到图像处理,Compass 能够轻松编写跨浏览器的防弹 CSS。 咱们喜欢将 Compass 视为 Sass 的标准库。web

Compass 中的 CSS3 支持多是该项目最使人震惊的方面。 Compass 提供了各类各样的 CSS3 mixin,能够轻松地以跨浏览器工做的方式利用这些新功能。编程

例如,border-radius mixin 容许您以简洁的方式使用新的 border-radius 属性:浏览器

a.button {
background: black;
color: white;
padding: 10px 20px;
@include border-radius(5px);
}


输出:app

a.button {
background: black;
color: white;
padding: 10px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}


查看输出,您能够看到border-radius mixin 输出了六行代码。 这六行容许您在全部现代 Web 浏览器中使用 border-radius。 (很酷的部分是,若是您本身编写此代码,您可能不会包含对 Opera (-o) 或 Konquerer (-khtml) 的支持,可是 Compass 免费为您提供全部这些!)框架

上面,我使用 @include 指令告诉 Sass 我想调用一个 mixin。 其后是 mixin 的名称,border-radius。 后跟括号括起传递混入的参数。 border-radius mixin 只有一个参数。 在这种状况下,5px 做为第一个参数的值传递。编程语言

Writing Your Own

让咱们看看上面的border-radius mixin的来源。 出于说明的目的,我将向您展现 mixin 的简化版本。 Compass 的实际版本有点复杂,但这会让你对如何编写本身的版本有一个很好的了解:ide

@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}


声明以@mixin 指令开头,后跟mixin 的名称。在这种状况下,border-radius. mixin 的名称能够包含字母和数字字符的任意组合,没有空格。而后是包含在括号 ( ... ) 中的 mixin 接受的参数列表。上面的 mixin 只有一个参数 $radius。可使用多个参数,只要它们用逗号分隔便可。

接下来是括在大括号 { ... } 中的 mixin 的定义。 mixin 的定义能够包含 CSS 属性的任意组合。您甚至能够声明将与属性一块儿混合到 CSS 中的其余规则(使用选择器)。

在这种状况下,border-radius mixin 包含一系列 CSS 属性,用于为全部使用浏览器特定前缀实现它的主要浏览器设置 border-radius 属性的值,并将最终的 border-radius 属性设置为 future-证实该属性,由于它已被正式接受为 CSS3 规范的一部分。

$radius 参数或变量用于设置每一个 CSS 属性的值。使用这种技术,您能够将一个值传递给 mixin,它会在输出中重复四次。这减小了您将一个或多个特定于浏览器的属性的值输入错误的可能性(若是您手动输入而不是使用 mixin),而且还节省了大量输入。

再看一个 SAP Spartacus 里的 mixin 例子:

使用 SASS Mixin 编写 clean code_css

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}


消费代码:

使用 SASS Mixin 编写 clean code_css_02

Default Arguments

您能够经过为 $radius 参数添加默认值来改进此 mixin,以下所示:

@mixin border-radius($radius: 5px) {
...
}


这使得 $radius 参数可选。 因此你能够像这样在没有它的状况下调用 mixin:

@include border-radius;


这将在声明的参数列表中输出具备默认值的属性。 在本例中为 5px,由于这是咱们在上面声明的。

另外一个很是有用的技巧是预先声明一个变量并将其用做 mixin 的默认值:

$default-border-radius: 5px !default;
@mixin border-radius($radius: $default-border-radius) {
...
}


这对于您在项目之间共享的代码特别有用。 经过修改全局变量来设置默认值,并根据须要覆盖该值。

Keyword Arguments

从 Sass 3.1 开始,最后一个 mixin 特性是关键字参数。 当 mixin 接受多个参数时,关键字参数特别有用。 若是参数是默认值,您可使用参数名称来设置参数的特定值,而无需传递其余参数的值。

与@if 条件一块儿使用,咱们能够制做出更好的 border-radius mixin 版本:

@mixin border-radius($radius: 5px, $moz: true, $webkit: true, $ms: true) {
@if $moz { -moz-border-radius: $radius; }
@if $webkit { -webkit-border-radius: $radius; }
@if $ms { -ms-border-radius: $radius; }
border-radius: $radius;
}


上面的代码分别根据 $moz、$webkit 和 $ms 的值有条件地输出 Firefox、Safari 和 Internet Explorer 的代码。 因为全部参数都有默认值,您能够经过调用 mixin 来关闭对 Internet Explorer 的支持,以下所示:

@include border-radius($ms: false);


这比使用没有名称的每一个参数调用 mixin 要简单得多:

@include border-radius(5px, true, true, true);


使用关键字参数,您甚至没必要按照声明的顺序调用带有参数的 mixin:

@include border-radius($ms: false, $radius: 10px);


总结

关于 Sass mixins 的概述到此结束。 为了更好地了解如何在代码中使用它们,我建议您查看一个成熟的 Sass 项目(如 Compass)的源代码,其中包含 200 多个可用于学习许多出色技术的 mixin。 此外,Compass 文档实际上包含“查看源代码”连接,能够轻松查看任何 mixin 的代码以查看其功能。 您能够先查看 border-radius 的实际实现。

更多Jerry的原创文章,尽在:"汪子熙":

使用 SASS Mixin 编写 clean code_css3_03