less语法--混合/带参数混合

责编:menVScode 2018-03-11 20:12 阅读(344)

混合:在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性。

【1】最简单的混合方式

/* less */
.classA{
    border:1px solid red;
    color: #fff;
}
classB{
    .classA;
    font-size: 26px;
}

/* 编译好后的css */
.classA {
  border: 1px solid red;
  color: #fff;
}
classB {
  border: 1px solid red;
  color: #fff;
  font-size: 26px;
}

【2】清除浮动的写法

/* less */
.clearFloat{
    zoom: 1;
    &:after{
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        overflow:hidden;
        content:".";
    }
}
.classA{
    .clearFloat;
    border:1px solid red;
    color: #fff;
}

/* 编译后的css */
.clearFloat {
  zoom: 1;
}
.clearFloat:after {
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  content: ".";
}
.classA {
  zoom: 1;
  border: 1px solid red;
  color: #fff;
}
.classA:after {
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  content: ".";
}


带参数混合:还可以像函数一样定义一个带参数的属性集合。

/* less */
.border(@width,@color){
    border: @width solid @color; 
}

.box1{
    .border(2px,red);
}
.box2{
    .border(4px,#abcdef);
}

/* 编译后的css */
.box1 {
  border: 2px solid #ff0000;
}
.box2 {
  border: 4px solid #abcdef;
}


带默认参数的混合

/* less */
.border(@width:1px,@color:red){
    border: @width solid @color; 
}

.box1{
    .border();
}
.box2{
    .border(4px,#abcdef);
}

/* 编译后的css */
.box1 {
  border: 1px solid #ff0000;
}
.box2 {
  border: 4px solid #abcdef;
}


@arguments:包含了所有传递进来的参数。注意:要在乎变量顺序的情况下去使用。慎用!!!

/* less */
.border(@width:1px,@color:red){
    border: @arguments solid; 
}

.box1{
    .border();
}
.box2{
    .border(4px,#abcdef);
}

/* 编译后的css */
.box1 {
  border: 1px #ff0000 solid;
}
.box2 {
  border: 4px #abcdef solid;
}


模式匹配

http://www.bootcss.com/p/lesscss/#-parametric-mixins

标签: 混合 less
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码