SASS - 混合(Mixin)

时间:2019-09-26
本文章向大家介绍SASS - 混合(Mixin),主要包括SASS - 混合(Mixin)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。


mixin是可以重用的一组CSS声明。mixin有助于减少重复代码,只需声明一次,就可在文件中引用。

可以看出,mixin类似变量,不同的是变量存储值,mixin存储一组css声明。mixin可以传入参数。

要创建一个mixin,可以使用@mixin指令:

@mixin mixin-name() {
    /* css 声明 */
}

一旦创建了mixin,就可以引用它,使用@include指令后跟mixin的名称:

...
@include mixin-name();
...

举例说明

mixin的一个常见用法是浏览器厂商前缀。

当浏览器厂商添加新的非标准CSS特性时,通常会标明厂商前缀,表示该特性只在特定浏览器上有效。

例如,-webkit-border-radius在Chrome和Safari浏览器有效,而-mozilla-border-radius在Firefox上有效。

对于这样的特性,通常需要包含所有浏览器的对应特性声明,以便兼容这些浏览器,这里就可以用minxin来实现:

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

aside { 
    border: 1px solid orange;
    @include border-radius(); 
    }

经过编译会输出以下css内容:

aside {
  border: 1px solid orange;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px; }

mixin 参数

可以给mixin传入参数,mixin中的css声明将更加灵活。

示例:

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

aside { 
    border: 1px solid orange;
    @include border-radius(7px); 
    }

经过编译会输出以下css内容:

aside {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px; }

mixin是sass中一个非常有用的功能。

原文地址:https://www.cnblogs.com/haibianren/p/11589396.html