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中一个非常有用的功能。

巴特西

SASS - 混合(Mixin)

举例说明

mixin 参数

最新文章

热门文章