作为函数混合

混合中定义的变量和混合是可见的,可以在调用者的作用域中使用,只有一个例外,那就是如果调用方包含一个具有相同名称的变量(其中包括由另一个mixin调用定义的变量),则不会复制变量,仅存在于调用者本地范围内的变量受到保护,而从父范围继承的变量将会被覆盖。

  • Mixin范围
    由变量和混合组成的混合可以在调用者的作用域中使用,并且是可见的。
  • Mixin和返回值
    mixin类似于函数,在mixin中定义的变量将作为它的返回值。
  • Mixin定义另一个mixin
    每当一个mixin定义在另一个mixin中时,它可以用作返回值。

示例:

    // 1:正常使用
    .mixin(){
        @color: green;
        @border: 1px solid red;
        @font-size: 24px;
        @width: 100px;
        @height: 200px;
    }
    .allVar_mixin{
        .mixin();
        color: @color;
        border: @border;
        font-size: @font-size;
        width: @width;
        height: @height;
    }
    // 输出结果
    .allVar_mixin{
        color: green;
        border: 1px solid red;
        font-size: 24px;
        width: 100px;
        height: 200px;
    }
    
    
    // 2:mixin中定义的变量用作返回值
    .var_reval(@a, @b) {
      @var_reVal: ((@a + @b) / 3);
    }
    div {
      .var_reVal(15px, 30px); 
      // 使用其返回值
      margin: @var_reVal;
    }
    // 输出结果
    div {
      margin: 15px;
    }
    
    
    // 3:在调用者作用域中直接定义的变量不能被覆盖,但在调用者父作用域中定义的变量不受保护会被覆盖
    .mixin() {
      @cover: action_scope;
      @notcover: action_scope;
    }
    .xkd {
      padding: @cover @notcover;
      .mixin();
    }
    // 调用方父作用域没有保护
    @cover: parent_scope; 
    // 输出结果
    .xkd {
      padding: action_scope action_scope;
    }
    
    
    // 4:定义的mixin充当返回值
    // 外混合
    .unlock(@value) { 
    // 嵌套混合
      .mix_reval() { 
        declaration: @value;
      }
    }
    #namespace {
      // 解锁一些混合
      .unlock(8); 
      // 嵌套的mixin被复制到这里并可用
      .mix_reval(); 
    }
    // 输出结果
    #namespace {
      declaration: 8;
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值