Sass 混合

前言

  • @mixin 指令允许定义一个可以在整个样式表中重复使用的样式。

  • @include 指令可以将混入(mixin)引入到文档中。

1、@mixin

1.1 定义混入

  • 混入 (mixin) 通过 @mixin 指令来定义。

  • 语法

    1
    @mixin name { property: value; property: value; ... }
  • 以下实例创建一个名为 “important-text” 的混入。

    1
    2
    3
    4
    5
    6
    @mixin important-text {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
    }
  • 注意:Sass 的连接符号 - 与下划线符号 _ 是相同的,也就是 @mixin important-text { }@mixin important_text { } 是一样的混入。

1.2 使用混入

  • @include 指令可用于包含一混入。

  • 语法

    1
    2
    3
    selector {
    @include mixin-name;
    }
  • 混入中也可以包含混入。

    1
    2
    3
    4
    5
    @mixin name {
    @include mixin-name;

    property: value; property: value; ...
    }
  • 包含 important-text 混入代码如下。

    1
    2
    3
    4
    5
    .danger {
    @include important-text;

    background-color: green;
    }
  • 将以上代码转换为 CSS 代码,如下所示。

    1
    2
    3
    4
    5
    6
    7
    8
    .danger {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;

    background-color: green;
    }

2、向混入传递变量

  • 混入可以接收参数。可以向混入传递变量。

  • 定义可以接收参数的混入。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 混入接收两个参数 */
    @mixin bordered($color, $width) {
    border: $width solid $color;
    }

    .myArticle {
    @include bordered(blue, 1px); // 调用混入,并传递两个参数
    }

    .myNotes {
    @include bordered(red, 2px); // 调用混入,并传递两个参数
    }
  • 以上实例的混入参数为设置边框的属性 (color 和 width) 。将以上代码转换为 CSS 代码,如下所示。

    1
    2
    3
    4
    5
    6
    7
    .myArticle {
    border: 1px solid blue;
    }

    .myNotes {
    border: 2px solid red;
    }

2.1 默认值

  • 混入的参数也可以定义默认值。

  • 语法

    1
    2
    3
    @mixin bordered($color: blue, $width: 1px) {
    border: $width solid $color;
    }
  • 在包含混入时,你只需要传递需要的变量名及其值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @mixin sexy-border($color, $width: 1in) {
    border: {
    color: $color;
    width: $width;
    style: dashed;
    }
    }

    p { @include sexy-border(blue); }
    h1 { @include sexy-border(blue, 2in); }
  • 将以上代码转换为 CSS 代码,如下所示。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    p {
    border-color: blue;
    border-width: 1in;
    border-style: dashed;
    }

    h1 {
    border-color: blue;
    border-width: 2in;
    border-style: dashed;
    }

2.2 可变参数

  • 有时,不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时我们就可以使用 … 来设置可变参数。

  • 例如,用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
    }

    .shadows {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    }
  • 将以上代码转换为 CSS 代码,如下所示。

    1
    2
    3
    4
    5
    .shadows {
    -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    }

3、浏览器前缀使用混入

  • 浏览器前缀使用混入也是非常方便的,如下实例。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
    }

    .myBox {
    @include transform(rotate(20deg));
    }
  • 将以上代码转换为 CSS 代码,如下所示。

    1
    2
    3
    4
    5
    .myBox {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    }
文章目录
  1. 1. 前言
  2. 2. 1、@mixin
    1. 2.1. 1.1 定义混入
    2. 2.2. 1.2 使用混入
  3. 3. 2、向混入传递变量
    1. 3.1. 2.1 默认值
    2. 3.2. 2.2 可变参数
  4. 4. 3、浏览器前缀使用混入
隐藏目录