SASS基础——十个常见的Mixins

傷城~ 2022-08-01 00:21 213阅读 0赞

从[W3cplus][]最近的更新都可以看出我的学习新动向。是的，自从开始学习SASS之后，我喜欢上了SASS。因为他能让我的工作效率更快，同时让我更加节约出时间去做一些我自己喜欢的事情。

现在开始我开始使用SASS私下用在我喜欢的项目中，让我更加的对SASS喜欢与执着。在使用过程中，SASS中的Mixins让我觉得他的功能强大，使用方便——SASS的Mixins可以一次性定义功能模块，让你在任何地方调用，并且可以无限制的重用。

[Compass][]是一个SASS的`mixins`库，里面包括了很多有用的功能模块，比如说`border-radius`和`box-shadow`等。但很多时候，这些功能模块还无法满足我们所有项目的需求，但是大家可以根据自己的需求定义一些功能模块。接下来主要和大家一起探讨一些在实际项目中经常使用的`mixins`。

## 声明Mixins ##

`Mixins`是SASS中的一个强大的功能。使用`@mixin`根据功能定义一个模块，然后在需要使用的地方通过`@include`来调用声明的`mixins`。其主要功能是可以让你的代码简洁高效。如果你在你的开发工作中使用了SASS，毫无疑问你正在使用一些`mixin`。如果你是初次接触SASS，或者说接触SASS一段时间，但还不知道如何定义`mixins`，也不用担心，你只需要花一点点时间，仔细阅读下面相关教程，你会对`mixins`有一个深入的了解：

*   [SASS官方文档][SASS]
 *   [SASS基础教程——SASS基本语法与特性][SASS_SASS]
 *   [理解SASS的嵌套，@extend，%Placeholders和Mixins][SASS_extend_Placeholders_Mixins]
 *   [sass揭秘之@mixin，%，@function][sass_mixin_function]

id="cproIframe\_u1490106\_1" width="468" height="60" src="http://pos.baidu.com/acom?adn=0&at=128&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=18&ch=0&col=zh-CN&conOP=0&cpa=1&dai=1&dis=0&layout\_filter=rank%2Cimage&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3Dlq48dvzw7AqbY9umD4edER72VCEs5gGmsU-hvt52rs1UTZfPN8kyaNo0dsqUetnojtex3vqsUlzU7n54NeCZGhVpb3r3IoWeTqFl-ZpEUYe%26wd%3D%26eqid%3Dd4701e110002073a00000005557e63fa&ltu=http%3A%2F%2Fwww.w3cplus.com%2Fpreprocessor%2Ften-best-common-mixins.html&lunum=6&n=01006029\_cpr&pcs=1335x688&pis=10000x10000&ps=1154x30&psr=1440x900&pss=1335x1265&qn=388a79962e598766&rad=&rsi0=468&rsi1=60&rsi5=4&rss0=&rss1=&rss2=&rss3=&rss4=&rss5=&rss6=&rss7=&scale=&skin=tabcloud\_skin\_6&stid=5&td\_id=1490106&tn=baiduCustSTagLinkUnit&tpr=1434348580731&ts=1&version=2.0&xuanting=0&dtm=BAIDU\_DUP2\_SETJSONADSLOT&dc=2&di=u1490106&ti=SASS%E5%9F%BA%E7%A1%80%E2%80%94%E2%80%94%E5%8D%81%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84Mixins%20%7C%20css3%E6%95%99%E7%A8%8B-css3%E5%AE%9E%E4%BE%8B-css3%E5%8A%A8%E7%94%BB%20%7C%20W3CPlus&tt=1434348580713.20.39.42" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: inherit;">

## 常用的Mixins ##

经过前面的学习（或者你使用SASS很久）之后，我想对于SASS的`mixins`并不会太陌生，甚至说，你有使用SASS做过项目的经验的话，你肯定有写过不放有用的`mixins`，并且准备用于你手中的任何项目中，但对于一个初学SASS的初学者（像偶一样的），对于怎么定义一些常用的`mixins`还是略有难度的。接下来，我在网上参考了不少实例，整理了一些自认为常用而用功能强大的`mixins`，希望这些`mixins`对于初学者对SASS有一个更理性的认知，当然更希望大家能通过这里的一些`mixins`获得更好的灵感，制作出更有意义的`mixins`。

### inline-block ###

`inline-block`在CSS中经常会有碰到，比如说我们需要制作一个水平排列的表单，其中 `label`标签需要和表单控件（比如说`input[type="text"]、input[type="checkbox"]`等）垂直居中对齐，我们常用的就是给他们加上下面的样式：

label, input { display: inline-block; vertical-align: middle; *display:inline; *zoom: 1; *vertical-align: auto; }

在SASS中，我们可以定义一个`inline-block()`：

$inline-block-alignment: middle !default;//设置一个默认的对齐方式 // 提供一个跨浏览器的方法来实现`display:inline-block` @mixin inline-block($alignment: $inline-block-alignment) { display: inline-block; @if $alignment and $alignment != none { vertical-align: $alignment; } @if $legacy-support-for-ie { *vertical-align: auto; zoom: 1; *display: inline; } }

在这个`inline-block`的`mixin`中，定义了一个参数`$alignment`，并且给其传了一个参数`$inline-block-alignment`。

当设置`$inline-block-alignment`为`none`或者`false`时，`inline-block`的Mixins中禁止输出`vertical-align`的属性值；当然我们可以通过设置`$alignment`的值来修改`vertical-align`的默认值。

众所周知，`display:inline-block`在IE低版本的浏览器中存在一定的问题，如果我们需要实现一个兼容IE低版本的`inline-block`效果，我们就得考虑在这个`mixin`中设置一个开关，当我需要兼容的时候开启，否则我就关闭。出天这个原因，我们在这个`mixins`中使用:

@if $legacy-support-for-ie {
        *display: inline;
        zoom: 1;
        *vertical-align: auto;
    }

注：这里的`*vertical-align:auto`并不是用来处理兼容`inline-block`所需的代码，而是用来兼容`vertical-align`属性的。

`inline-block`的`mixin`定义好了，或许大家会关心如何调用，这个很简单，我们来看一个简单的例子：

//SCSS $legacy-support-for-ie: true !default; label, input { @include inline-block(); } //CSS label, input { display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }

这里我们就只是简单的通过`@include`调用了刚才声明的`inline-block`。这个时候你可能会想，我已经不理IE很久了，而且我也不想输出`vertical-align`。实际上这些并不是难度，刚才我们在定义`inline-block`也说明了，只要`$inline-block-alignment`值为`none`或者`flase`就不会输出。至于在IE下不输出兼容代码，那就更简单的了，只需要设置`$legacy-support-for-ie`为`false`就OK了，如：

//SCSS $legacy-support-for-ie: false !default; label, input { @include inline-block(none); } //CSS label, input { display: inline-block; }

此时如果你想让元素顶部对奇，那也不是一件难事：

//SCSS $legacy-support-for-ie: false !default; label, input { @include inline-block(top); } //CSS label, input { display: inline-block; vertical-align: top; }

### 水平居中 ###

元素水平居中实现方法很多种（《[六种实现元素水平居中][Link 1]》一文中介绍了六种不同方法），但我们最常用的还是给一个元素设置一个具体的宽度（设置`min-width`或`max-width`也行，但在IE下需要另行考虑），配合`margin-left`和`margin-right`的值为`auto`实现水平居中：

@mixin horizontal-center { margin-left: auto; margin-right: auto; }

这个时候，只需要在有宽度的元素中调用`horizontal-center`，就能让一个元素实现水平居中：

//SCSS $width: 960px !default; .container { width: $width; @include horizontal-center; } //CSS .container { width: 960px; margin-left: auto; margin-right: auto; }

这个`horizontal-center`没有设置任何参数，通过前面的基础知识，我们可以得知`mixin`只会复制代码，并不会进行代码合并，为了让样式中相同代码合并，我们可以通过`%placeholders`来实现。换句话说，在定义的`horizontal-center`基础上，我们可以配合`%`来进行二次声明：

%horizontal-center {
        @include horizontal-center;
    }

接下来可以通过`@extend`来配合使用：

//SCSS $width: 960px !default; .container { width: $width; @extend %horizontal-center; } //CSS .container { margin-left: auto; margin-right: auto; } .container { width: 960px; }

`%horizontal-center`和`@mixin horizontal-center`所起的功能是一样的，都是用来实现元素水平居中，其最大的区别是，前者适合使用在多个元素之上，后者适合使用在单个元素之上。这样说或许有点迷糊，我们来举个栗子：

假设在样式中，我有`.container`和`.menu`两个元素，他们宽度不一致，但都希望实现水平居中，那么这个时候我们就可以使用`%horizontal-center`，因为这样，我们可以将居中这部分代码合并在一起：

//SCSS $width: 960px !default; .container { width: $width; @extend %horizontal-center; } .menu { width: $width / 2; @extend %horizontal-center; } //CSS .container, .menu { margin-left: auto; margin-right: auto; } .container { width: 960px; } .menu { width: 480px; }

从编译出来的CSS代码中很明显的可以发现：`.container`和`.menu`有关于居中代码合并在一起：

.container, .menu { margin-left: auto; margin-right: auto; }

对于`@mixin horizontal-center`比较适合在一个元素实现水平居中的时候使用。如果在样式之中仅有一个元素要水平居中，也使用`%horizontal-center`的话，会让你失望的：

//SCSS $width: 960px !default; .container { width: $width; @extend %horizontal-center; } //CSS .container { margin-left: auto; margin-right: auto; } .container { width: 960px; }

从实例中明显的可以看出，原本在`.container`中一次性能完成的事情，但使用`%horizontal-center`却将样式拆分成两个部分。这种并不是大家想要的，或者说希望看到的。出于这个情况之下，我们还是使用`@mixin horizontal-center`会完美一些：

//SCSS $width: 960px !default; .container { width: $width; @include horizontal-center; } //CSS .container { width: 960px; margin-left: auto; margin-right: auto; }

### 浮动与重置浮动 ###

在CSS中，浮动常用来实现布局效果，当然很多时候也使用浮动来完成文字围绕图片的效果。常见的就是左浮动、右浮动。虽然浮动功能强大，能帮助我们实现很多布局效果，但有时候在相同的模块中，要将浮动重置掉，不得不把当前设置的浮动效果，使用`none`重置。对于浮动的出现频繁率，将浮动和重置浮动列入SASS的`mixins`。

首先我们通过`@mixin`来声明一个`float`：

@mixin float($side:left){ float: unquote($side); @if $legacy-support-for-ie { _display:inline; } }

由于IE6下浮动碰到同方向的`margin`会引起双倍`margin`的Bug，为了解决这个Bug，在`@mixin float`中添加一个条件判断，如果支持IE6，就添加：

@if $legacy-support-for-ie {
        _display:inline;
    }

对于`float`我们只需要声明这个就能使用了，但为了让你的代码更具语义化，可以在此基础上增加一个`pull-left`为左浮动和`pull-right`为右浮动：

//左浮动 @mixin pull-left{ @include float(left); } %pull-left { @include float(left); } //右浮动 @mixin pull-right{ @include float(right); } %pull-right { @include float(right); }

如此一来，我们可以轻松的通过`@include`或者`@extend`来调用定义好的`pull-left`或者`pull-right`：

//SCSS .col{ @extend %pull-left; } .aside { @include pull-right; } //CSS .col { float: left; _display: inline; } .aside { float: right; _display: inline; }

浮动让你既爱又恨，在实际需求之中难免需要重置掉已设置的了浮动的功能，并且重置`display`。那么接下来定义的`reset-float`就可以轻松帮你完成你要的功能：

@mixin reset-float($display:block){ float: none; display: $display; }

此处传了一个参数`$display`给`reset-float`。他可以帮你在重置`float`的时候，重置`display`属性，默认情况下，`@include reset-float`出来`display:block`，但你可以显式的传一个值给他，从而重置`display`属性：

//SCSS .content { @include reset-float(inline); } //CSS .content { float: none; display: inline; }

### 清除浮动`clearfix` ###

有浮动就有清除浮动，在CSS中[清除浮动][Link 2]的方法有很多种，在这里主要来看最常用的clearfix清除浮动方法。同样先创建一个`clearfix`:

@mixin clearfix { @if $legacy-support-for-ie { *zoom: 1; } &:before, &:after { content: ""; display: table; } &:after { clear: both; overflow: hidden; } } %clearfix { @include clearfix; }

同样为了兼容IE低版本浏览器，里面添加了`@if $legacy-support-for-ie`开关，如果其值为`true`就开启，如果其值为`false`就关闭，这个和前面介绍的是一样功能。

创建好`clearfix`后，直接在你需要的地方通过`@extend`和`@include`方法调用（对于他们的区别，此处不在阐述）：

//SCSS .container { @extend %clearfix; } //CSS .container { *zoom: 1; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; overflow: hidden; }

### 图片替代文本 ###

图片替代文本，这是页面中常用的效果，平时解决方法，就是在需要使用图片替代文本的地方，添加一个类名。这种方法虽然能解决问题，但维护真心的蛋疼，小生深有感受呀。然而我们在SASS的Mixin中定义一个 `ir`（Image replacement），将功能都写成一个模块，需要的时候调用，省得不停的添加和删除类名。

《[十种图片替换文本CSS方法][CSS]》这里罗列了十多种图片替换文本的方法，我们就不纠结使用拿一种了，找了最新发现的一种（来自于[H5bp][]）:

@mixin ir {
        background-color: transparent;
        border: 0;
        overflow: hidden;
        @if $legacy-support-for-ie {
            *text-indent: -150%;
        }
    
        &:before {
            content: "";
            display: block;
            width: 0;
            height: 150%;
        }
    }
    
    %ir {
        @include ir;
    }

这是来自于[H5bp][]中的一种图片替换文本方法，但没有测试ie低版本，现代浏览测试是OK的，如果大家觉得这种方法对兼容性不可靠，可以换过一些常用的，可靠的版本。

在实际使用中要让图片替换文本成功，我们还需要在对应的地方加入一些基本的样式。或许你会问，为什么不一起加入呢？因为针对不同的元素，在这里统一加，有点浪费，所以使用时可以根据元素自身进行加载：

//SCSS #logo { display: block; width: 100px; height: 100px; @include ir; } //CSS #logo { display: block; width: 100px; height: 100px; background-color: transparent; border: 0; overflow: hidden; *text-indent: -150%; } #logo:before { content: ""; display: block; width: 0; height: 150%; }

### 隐藏元素 ###

最常用来隐藏一个元素的方法是使用`display:none`，可这并不是一个完美的方法，这样会让屏幕阅读器无法读到这个元素。为了解决这个问题，使用另外一种方法来实现元素的隐藏，而这种方法仅在浏览器中隐藏了元素，而屏幕阅读器却能读到这个元素。

//1.浏览器和屏幕阅读器都隐藏元素 @mixin hidden { display: none !important; visibility: hidden; } %hidden { @include hidden; } //2.仅浏览器隐藏，屏幕阅读器不被隐藏 @mixin visuallyhidden { @if $legacy-support-for-ie { clip: rect(0,0,0,0); } border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; 扩展了`.visuallyhidden`，充许`.focusable`元素通过键盘获取 &.focusable:active, &.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } } %visuallyhidden { @include visuallyhidden; } //3.隐藏元素，但布局中占有空间 @mixin invisible { visibility: hidden; } %invisible { @include invisible; }

### 截取文本`text-overflow` ###

截取文本，到目前为止对于单行文本，我们可以使用`text-overflow`来实现。但对于多行文本的截取，使用纯CSS来实现，还是很蛋疼的。[Roman][]在《[CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS][CSS Ellipsis_ How to Manage Multi-Line Ellipsis in Pure CSS]》一文中详细介绍了使用纯CSS实现多行文本截取的方法。不过，在此处我们不做过多的深入，因为这里所说的文本截取是针对于单行文本。

对于单行文本的截取，需要同时满足三个条件：明确的宽度、文本强制不换行和隐藏多余文本。只有在这三个条件都成立的情况这下，配合`text-overflow`属性才能截取文本，并用`…`代替截取不显示的文本。

知道实现的方法，定义`mixin`就简单多了：

@mixin singleline-ellipsis($substract:0){ //`$substract`单位为% overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100% - $substract; } %singleline-ellipsis { @include singleline-ellipsis; }

同样定义了`mixin`和`%placeholders`，但这个`singleline-ellipsis`和前面的使用略有不同。主要区别在于，`@mixin singleline-ellipsis`可以给其传一个参数`$substract`，从而改变元素的`width`值，而`%singleline-ellipsis`是无法给其传值，元素的宽度永远为`100%`:

//SCSS .text-overflow { @extend %singleline-ellipsis; } .text-overflow2 { @include singleline-ellipsis(); } .text-overflow3 { @include singleline-ellipsis(20); } //CSS .text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .text-overflow2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .text-overflow3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 80%; }

### 透明度`opacity` ###

`opacity`属性主要是用来设置元素的透明度，不过他会让元素的所有后代元素继续这个透明度，直接影响了可视度。但有时候我们还真缺不了这个东东，不过本人更建议使用`RGBA`来处理元素的透明度，只可以IE低版本会让你受尽折磨。为了让你减轻兼容的痛，还是先来看看`opacity`的`mixin`如何定制吧。

@mixin opacity($opacity:50) { opacity: $opacity / 100; @if $filter{ filter: alpha(opacity=$opacity); } }

这里需要注意，为了判断是否兼容IE低版本，此处设置了一个开关变量`$filter`，如果其值为`true`就兼容，如果其值为`false`就不兼容。并且这个开关变量`$filter`和前面设置的`$legacy-support-for-ie`开关，都放置在同一个文件`_setting.scss`中。当然如果你不做统一规划，你只需要在将其声明就可以。

在实际应用就很简单的了：

//SCSS .opacity { @include opacity(65); } //CSS .opacity { opacity: 0.65; filter: alpha(opacity=65); }

### 禁用样式`disabled` ###

禁用样式一般都出现在表单中，比如说某个输入框`input[type=text]`或者某个按钮`input[type=button]`设置了`disabled="disabled"`属性，让用户无法操作。为了能让用户知道这些控制无法操作，所以特意给他定义一个`.disabled`样式，用户一看就知道这些控件不能操作。

@mixin disabled($bgColor: #e6e6e6,$textColor:#ababab){ background-color: $bgColor !important; color: $textColor !important; cursor: not-allowed !important; }

这里设置了两个参数，第一个是`$bgColor`用来定义背景色，第二个是`$textColor`用来定义文本色。同时为他们设置了默认值，不过在实际调用时，可以根据自己需要修改颜色：

//SCSS input[disabled]{ @include disabled(#efefef,#ccc); } //CSS input[disabled] { background-color: #efefef !important; color: #cccccc !important; cursor: not-allowed !important; }

### 最小高度`min-height` ###

`min-height`最小高度，主要用来设置元素的最小高度。当元素内容撑不到所需高度时，就可以使用`min-height`轻松实现。

@mixin min-height($height){ min-height: $height; height: auto !important; @if $legacy-support-for-ie { _height: $height; } }

当你要给一个元素设置`min-height`为`100px`时，只需要这样使用：

//SCSS .min-height { @include min-height(100px); } //CSS .min-height { min-height: 100px; height: auto !important; _height: 100px; }

## 待续... ##

在这篇文章中，根据[sassCore][]中的[\_mixin.scss][mixin.scss]和[Compass][]的[Mixins][]为依据和参考对像，总结了十个常见的`Mixins`，主要包括：设置行内块`inline-block`、水平居中`horizontal-center`、设置浮动`float`、重置浮动`reset-float`、图片替换文本`ir`等。当然优秀的`Mixins`不只这十个。我只想用这些简单的`Mixins`让大家对SASS更有兴趣。当然还是以学会SASS为出发点。接下来我还会继续为大家介绍其他`Mixins`的定义与使用。如果你喜欢这样的教程，或者说你有其他优秀的`Mixins`，烦请在下面的评论中与我们一起分享。 (^\_^)。

如需转载，烦请注明出处：[http://www.w3cplus.com/preprocessor/ten-best-common-mixins.html][http_www.w3cplus.com_preprocessor_ten-best-common-mixins.html]

[W3cplus]: http://www.w3cplus.com/
[Compass]: http://compass-style.org/
[SASS]: http://www.w3cplus.com/preprocessor/sass-chinese-reference.html
[SASS_SASS]: http://www.w3cplus.com/preprocessor/sass-basic-syntax-and-features.html
[SASS_extend_Placeholders_Mixins]: http://www.w3cplus.com/preprocessor/sass-basic-mixins-nesting-placeholders-extend.html
[sass_mixin_function]: http://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html
[Link 1]: http://www.w3cplus.com/css/elements-horizontally-center-with-css.html
[Link 2]: http://www.w3cplus.com/css/clear-float
[CSS]: http://www.w3cplus.com/css/ten-image-replace-text-with-css
[H5bp]: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
[Roman]: http://www.mobify.com/blog/author/roman/
[CSS Ellipsis_ How to Manage Multi-Line Ellipsis in Pure CSS]: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
[sassCore]: https://github.com/marvin1023/sassCore
[mixin.scss]: https://github.com/marvin1023/sassCore/blob/master/core/_mixin.scss
[Mixins]: http://compass-style.org/index/mixins/
[http_www.w3cplus.com_preprocessor_ten-best-common-mixins.html]: http://www.w3cplus.com/preprocessor/ten-best-common-mixins.html