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