Less-mixin函数基础一

//mixin函数

立即执行mixin函数，example：
.test{
    color:#ff00000;
    background:red;
}

//立即执行mixin grammar 1 扩展extend
.study{
    &:extend(.test);
}

//输出css
.test,
.study {
  color: #ff0000;
  background: red;
}

//立即执行mixin grammar 2:
.study{
    .test;
}

//输出css
.test {
  color: #ff0000;
  background: red;
}
.study {
  color: #ff0000;
  background: red;
}

小结：扩展比直接调用mixin函数更利于简化代码

非立即执行mixin函数，example:
.test(){
    color:#ff0000;
    background:red;
}

//执行 grammar 1
.study{
    .test;
}

//执行 grammar 2
.study{
    .test();
}

小结：当调用mixin时，括号是可选的，定义mixin函数有利于减少css大小

minxin组合使用，example:
.test(){
    color:#ff0000;
    background:red;
}

//grammar 1
.study{
    .test;
}
.study2:extend(.study){}

//grammar 2
.study,.study2{
    .test;
}

//输出css
.study,
.study2 {
  color: #ff0000;
  background: red;
}

小结：extend中不能调用mixin函数，错误用法（ .study:extend(.test){} ）

作者：leona

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

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