混合器

╰半夏微凉° 2023-02-17 11:13 1阅读 0赞

### 文章目录 ###

*  混合器
 *   *  5-1. 何时使用混合器
     *  5-2. 混合器中的CSS规则
     *  5-3.给混合器传参
     *  5-4. 默认参数值

# 混合器 #

> 混合器使用@mixin标识符定义, 通过@include来使用这个混合器。

@mixin main-color {
        color: #00f;
    }
    
    main{
        font-size: 30px;
        @include main-color;
    }

## 5-1. 何时使用混合器 ##

> 你是否为这个混合器想出一个好名字，如果你能找到一个很好的短名字来描述这些属性修饰的样式，那么往往能够构造一个合适的混合器。

## 5-2. 混合器中的CSS规则 ##

> 混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性。

@mixin demo-style {
        color: #00f;
        ul {
            li {
                border: 1px solid #f00;
            }
        }
    }
    
    main {
        font-size: 30px;
        @include demo-style;
    }

*混合器中的规则甚至可以使用sass的父选择器标识符&*

## 5-3.给混合器传参 ##

> 混合器可以通过在@include混合器时给混合器传参,来制定混合器生成的精确样式。

@mixin link-colors($normal, $hover, $visited) {
        color: $normal;
        &:hover {
            color: $hover;
        }
        &:visited {
            color: $visited;
        }
    }
    
    main {
        font-size: 30px;
        a {
            @include link-colors($normal: blue, $hover: green, $visited: red);
        }
    }

## 5-4. 默认参数值 ##

> 给参数制定一个默认值，参数默认值使用$name:default-value的声明形式。

@mixin link-colors($normal, $hover, $visited: red) {
        color: $normal;
        &:hover {
            color: $hover;
        }
        &:visited {
            color: $visited;
        }
    }
    
    main {
        font-size: 30px;
        a {
            @include link-colors($normal: blue, $hover: green);
        }
    }

混合器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关混合器

相关使用Mises-Fisher混合器实现自然音频流的鲁棒说话人聚类