CSS►sass

sass 入门（三）

  • 混合宏
  • 扩展/继承
  • 占位符

    • 混合宏

    当相同的类型变得越来越多，简单的变量已经达不到我们的要求，这时我们就需要混合宏来帮我们完成。

    声明混合宏

    1. 不带参数混合宏

    1
    2
    3
    4
    @mixin border-radius {
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    @mixin 用于声明混合宏的关键词。border-radius为混合宏的名称
    2. 带参数混合宏

    1
    2
    3
    4
    @mixin border-radius($radius: 5px) {
        -webkit-border-radius: $radius;
        border-radius: $radius;
    }

    3. 复杂混合宏

    简单来说就是添加了逻辑关系

    1
    2
    3
    4
    5
    6
    7
    8
    @mixin box-shadow($shadow...) {
      @if length($shadow) >= 1 {
        @include prefixer(box-shadow, $shadow);
      } @else{
        $shadow:0 0 4px rgba(0,0,0,.3);
        @include prefixer(box-shadow, $shadow);
      }
    }

    当$shadow的参数数量大于等于1时，使用参数调用，反之则使用默认值。

    … 下面“混合宏参数”会提到，传递单个参数的值过多时使用

    调用混合宏

    使用 @include 调用

    1
    2
    3
    4
    @mixin border-radius {
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    调用

    1
    2
    3
    .demo {
        @include border-radius;
    }

    编译

    1
    2
    3
    4
    .demo {
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    混合宏参数

    混合宏传参的多种情形

    1. 不带值参数

    1
    2
    3
    4
    @mixin border-radius($radius) {
        -webkit-border-radius: $radius;
        border-radius: $radius;
    }

    调用

    1
    2
    3
    .demo {
        @include border-radius(5px);
    }

    编译

    1
    2
    3
    4
    .demo {
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    2. 带值参数（含有默认值）

    1
    2
    3
    4
    @mixin border-radius($radius:5px) {
        -webkit-border-radius: $radius;
        border-radius: $radius;
    }

    调用

    1
    2
    3
    4
    5
    6
    7
    .demo1 {
        @include border-radius;     //直接调用， 不带参数
    }

    .demo2 {
        @include border-radius(3px);     //带参数
    }

    编译

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .demo1 {
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .demo2 {
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    3. 多个参数

    字面意思，就是可以传多个参数

    1
    2
    3
    4
    @mixin box($width, $height) {
        width: $width;
        height: $height;
    }

    1
    2
    3
    .demo {
        @include box(200px, 200px);
    }
    1
    2
    3
    4
    .demo {
        width: 200px;
        height: 200px;
    }

    特别参数…，传递单个参数的值过多时使用

    1
    2
    3
    4
    @mixin box-shadow($shadows...) {
        -webkit-box-shadow: $shadow;
        box-shadow: $shadows;
    }

    在实际调用中：

    1
    2
    3
    .box {
      @include box-shadow(0 0 1px rgba(#000,.5), 0 0 2px rgba(#000,.2));
    }

    编译出来的CSS:

    1
    2
    3
    4
    .box {
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    }

    扩展/继承

    继承字面意思，类似java 子类继承父类。只不过这个继承是并存。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .btn {
        border-radius: 3px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    .btn-primary {
        background-color: green;
        color: #fff;
        @extend .btn;
    }

    .btn-warn {
        background-color: red;
        color: #fff;
        @extend .btn;
    }

    编译

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .btn, .btn-primary, .btn-warn {
        border-radius: 3px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    .btn-primary {
        background-color: green;
        color: #fff;
    }

    .btn-warn {
        background-color: red;
        color: #fff;
    }

    占位符 %placeholder

    取代以前 CSS 中的基类造成的代码冗余的情形，如果不被 @extend调用的话，不会产生任何代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    %pt15 {
        padding-top: 15px;
    }

    .demo1 {
        @extend %pt15;
    }

    .demo2 {
        @extend %pt15;
    }

    编译

    1
    2
    3
    .demo1, .demo2 {
        padding-top: 15px;
    }

    通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

    混合宏 继承 占位符
    声明方式 @mixin .class %placeholder
    调用方式 @include @extend @extend
    使用环境 如果相同代码需要在不同的环境传递不同的值，可以通过混合宏来定义重复使用的代码块。 相同代码已存在且无参数，可以调用已存在基类。 与继承基本类似，唯一不同的是，相同代码没有在基类中存在，而是需要额外声明。不调用则不会生成。