使用 SASS Mixin 编写 clean code

原文:LEVERAGING SASS MIXINS FOR CLEANER CODE

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

Mixins are like macros

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

How Mixins Work

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

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

Compass 中的 CSS3 支持可能是该项目最令人震惊的方面。 Compass 提供了各种各样的 CSS3 mixin,可以轻松地以跨浏览器工作的方式利用这些新功能。

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

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

输出:

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 的实际版本有点复杂,但这会让你对如何编写自己的版本有一个很好的了解:

@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 例子:

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

消费代码:

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 的实际实现。

(0)

相关推荐

  • 基于综合服务平台浅谈Sass应用

    一.       前言 CSS不是一种编程语言,只是单纯的一行行的描述,没有逻辑没有变量,因此写CSS对于习惯于运用逻辑思维编码的程序员来说是一件很头疼的事.于是勤奋的程序员就开始运转他们敏捷的大脑, ...

  • SASS学习

    一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,诞生于2007年,是最早也是最成熟的一款CSS预处理器语言,它可以使用变量.嵌套.混入.继承,运算,函数等功能,使得CSS的开发, ...

  • 桥梁剪贴画

    图片来源于:互联网

  • 景观冬季PNG

    图片来源于:互联网

  • SCSS基本使用

    Sass就是css的预处理器,Scss是Sass3版本中引入的新语法特性 vue中使用scss,安装: cnpm i -S node-sass sass-loader 使用: <style la ...

  • 剪贴画“花”

    图片来源于:互联网

  • Refresh Clean Code

    这是一本被前辈称赞, 另一个马丁的知名著作, 被赋予学习如何写出漂亮代码的教皇级手册, 最近(再)浏览, 有诸多感受. 总结一下就是如果你是新手, 可能看优秀的open source学习更好; 如果你 ...

  • C语言编程规范 clean code

    规则并不是完美的,通过禁止在特定情况下有用的特性,可能会对代码实现造成影响.但是我们制定规则的目的"为了大多数程序员可以得到更多的好处", 如果在团队运作中认为某个规则无法遵循,希 ...

  • 在vs code上怎么编写python程序?

    这个非常简单的,只需要安装一下Python插件,之后配置一下python.pythonPath路径(即本地Python解释器路径),最后就可以直接编写Python程序并运行了,下面我简单介绍一下配置过 ...

  • 家谱怎么编写,有什么格式?

    家谱的形式和内容 一.什么是家谱? 家谱作为中华几千年历史发展传承而来的文化表现形式,虽然在长期的发展过程中因各种因素而编写形式有所不同,在编写体例.记载范围.记载内容和编修重点会有所不同,但其格式规 ...

  • 如何从零开始开发一个 VS Code 插件?

     今天 之前一直以为开发VS code插件是一件很难的事情,后来工作上需要搞一个效率小工具,就试着找了些资料来入门,发现其实就入门和开发一些简单功能的插件来说难度还是很低的.因为vscode本身是基于 ...

  • 如何编写简历核心能力部分?

    创建一份简历以突出你的重要工作经验,完整的技能和资格,对于帮助你引起关注很重要.你的简历是你为准雇主提供良好第一印象的机会,具有核心能力部分的简历可让你注意你最相关的技能以及你将成为什么样的员工.我们 ...

  • 二、编写式讽喻

    19.有一个卖骏马的人,一连三个早 晨带着骏马站在马市上,没有人过问. 他去见善相马的伯乐,说:"我有一匹骏 马,打算卖掉它,可一连三个早晨站在 马市上,没有一个人来问过.我希望您 在我的马 ...

  • VS Code 1.56 发布!Terminal tab 终于来了!

    Visual Studio Code 1.56 稳定版已发布,其中一些主要亮点内容如下: 改进的 hover feedback:帮助你快速找到可点击的编辑器操作. 终端配置文件的改进:创建自定义默认终 ...

  • 科研课题结题报告编写

    科研课题结题报告编写