Less 混入基础

Less 中的混入指将通用的样式抽取出来放在一个 class 下面,然后在需要的地方应用该 class。

无参数混入

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

// 公用的样式
.bordered {
   border-top: dotted 1px black;
   border-bottom: solid 2px black;
}

如果我们现在需要在其他 class 中引入那些通用的属性集,那么我们只需要在任何 class 中像下面这样调用就可以了:

#menu a {
   color: #111;
   // 引入公用的样式
   .bordered;
}

.post a {
   color: red;
   // 引入公用的样式
   .bordered;
}

.bordered class 里面的属性样式都会在 #menu a 和 .post a 中体现出来,编译 less 输出的 CSS 如下:

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}
#menu a {
 color: #111;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}
.post a {
 color: red;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

注意:在 Less 中,任何 CSS 的 class, id 或者 元素 属性集都可以以同样的方式引入。

带参数混入

在 LESS 中,你还可以像函数一样定义一个带参数的属性集合。例子:

// 这里定义了一个类,默认参数为 5px
.rounded-corners (@radius: 5px) {
   border-radius: @radius;
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
}

#header {
   // 调用前面定义的类 rounded-corners,参数使用默认值 5px
   .rounded-corners;
}
#footer {
   // 调用前面定义的类 rounded-corners,且传递参数 10px
   .rounded-corners(10px);
}

编译 less,输出的 CSS 如下:

#header {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
#footer {
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

示例

动态设置圆角大小

使用 Less 动态设置圆角大小,通过参数 @radius 动态传递圆角大小。如下:

// 定义通用代码
.border-radius (@radius) {
   border-radius: @radius;
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}

#header {
   // 调用,圆角为 4px
   .border-radius(4px);
}
.button {
   // 调用,圆角为 6px
   .border-radius(6px);  
}

编译 less,输出的 CSS 如下:

#header {
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
}
.button {
 border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
}

给参数设置默认值

使用 Less 给参数设置默认值:

// 定义公用样式,设置参数 @radius 默认值为 5px
.border-radius (@radius: 5px) {
   border-radius: @radius;
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}

#header {
   // 引用公用样式,采用默认值参数
   .border-radius;  
}

编译 less,输出的 CSS 如下:

#header {
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

隐藏混合,不输出到CSS

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到 CSS 中去,但是你还想在其他的属性集合中引用。那么在定义属性集合时添加一对空括号集合。例子:

// 下面带了 () 括号,所以不会输出到 CSS,除非手动调用
.wrap() {
   text-wrap: wrap;
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
   word-wrap: break-word;
}

pre {
   // 引用属性集合,即调用
   .wrap
}

编译 less,输出的 CSS 如下:

pre {
 text-wrap: wrap;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 word-wrap: break-word;
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号