SASS基础——十个常见的Mixins

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

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

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

声明Mixins

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

常用的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-blockmixin中,定义了一个参数$alignment,并且给其传了一个参数$inline-block-alignment

当设置$inline-block-alignmentnone或者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-alig

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/ten-best-common-mixins.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部