Less-Mixins分离规则集

//Mixins

--立即执行函数
.test{/* */}
#test{/* */}  

--指定执行函数
.test(){/* */}
#test(){/* */}

--调用：
.test; or .test();
#test; or #test();

这些函数，你可以用css的各种选择器去命名

--分离规则集函数
内容：一组css属性，嵌套规则集，媒体声明或任何存储在变量中的其他内容
运用：使用它作为一个mixin参数，并像任何其他变量一样传递
example1:
@ruleStudy:{
    background:red;
  };

.study{
    @ruleStudy();
}

//output css
.study {
  background: red;
}
语法: @name:{};
调用: @name();
注意：在这里括号是必须得，而在前面介绍的括号是可选的，要注意区分

example2:
.test(@ruleStudy){
    @media screen and(min-width:1200){ @ruleStudy(); }
}
.study{
    .test({
        font-size:18px;
    });
}

//output css
@media screen and (min-width: 1200) {
  .study {
    font-size: 18px;
  }
}

example3:
@ruleStudy:{
    .rule1{
        @media (min-width:1200){
            font-size:18px;
        }
    }
};
@media(screen){
    @ruleStudy();
}

//output css
@media (screen) and (min-width: 1200) {
  .rule1 {
    font-size: 18px;
  }
}

小结：分离规则集和前面介绍的一样，内部变量不可以改变外部变量，外部也获取不到内部的数据
分离规则集中的变量属于私有变量，但是可以通过在内部去调用分离规则集，从而获取返回值而解锁私有变量

--立即执行函数
.test{/* */}
#test{/* */}  

--指定执行函数
.test(){/* */}
#test(){/* */}

--调用：
.test; or .test();
#test; or #test();

--分离规则集
@test:{/* */};

--调用：
.test();

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6297695.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接