一、混合定义函数及混合函数的传参
less定义多个具有相同名称和参数数量的混合是合法的。带多个参数的混合,参数用分号分割，逗号会作为列表传递，即如果传参的括号里面全部都是以逗号分割，那么会依次传给各个参数值，如果传参的括号里面既有逗号也有分号，则会把分号前面的看做一个整体传给一个参数值。例如
.mixin(@color;) {
color-1: @color;
}
.mixin(@color; @padding:5px;) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2px) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(yellow);
}
//函数混合传参
.mixin(@color; @padding:xxx; @margin: 2px) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.div {
.mixin(red, 2px, 3px; something, ele); //此处第一个分号前会作为一个参数，后面的作为第二个参数
}
.div1 {
.mixin(green,2px,3px);//此处则是作为三个参数传递
}
.div2 {
.mixin(black,2px,3px;);//此处则是作为三个参数传递
}上述编译后结果：
.some .selector div {
color-1: #ffff00;
color-2: #ffff00;
padding-2: 5px;
}
/*混合参数传参*/
.div {
color-3: #ff0000, 2px, 3px;
padding-3: something, ele;
margin: 2px 2px 2px 2px;
}
.div1 {
color-3: #008000;
padding-3: 2px;
margin: 3px 3px 3px 3px;
}
.div2 {
color-3: #000000, 2px, 3px;
padding-3: xxx;
margin: 2px 2px 2px 2px;
}二、less函数命名参数
less的函数支持命名参数的形式传参，例如
//命名参数
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: red);
}
.class2 {
.mixin(yellow, @padding: 40px);
}
.class3 {
.mixin(@padding: 80px)
}编译的结果为：
.class1 {
color: #ff0000;
margin: 20px;
padding: 20px;
}
.class2 {
color: #ffff00;
margin: 10px;
padding: 40px;
}
.class3 {
color: #000000;
margin: 10px;
padding: 80px;
}三、函数的匹配模式级函数变量返回值
定义多个相同名称的函数，通过匹配调用不同函数，函数变量返回值即在函数中将计算的结果赋值给变量。例如
// 匹配模式
.border(all, @w: 5px) {
border-radius: @w;
}
.border(t_l, @w: 5px) {
border-top-left-radius: @w;
}
.border(t_r, @w: 5px) {
border-top-right-radius: @w;
}
.border(b-l, @w: 5px) {
border-bottom-left-radius: @w;
}
.border(b-r, @w: 5px) {
border-bottom-right-radius: @w;
}
// 函数中变量返回值
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
.weight(@x, @y) {
@add: (@x + @y);
}
footer{
//.border(all, 10px);
.border(t_l, 10px);
.border(t_r, 10px);
.average(500px, 300px);
line-height: @average;
background: aqua;
width: 500px;
height: 300px;
.weight(500, 300);
font-weight: @add;
float: left;
}编译后css如下
footer {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
line-height: 400px;
background: aqua;
width: 500px;
height: 300px;
font-weight: 800;
float: left;
}四、arguments变量代表所有可变参数
通过arguments替代所有函数参数，例如
//arguments变量，代表所有可变参数
.border(@x: solid, @c: red) {
border: 21px @arguments;
}
.div1 {
.border();
}编译后css样式如下
.div1 {
border: 21px solid #ff0000;
}五、less的嵌套及&的符号
less可以通过嵌套的方式减少代码冗余，使用&可以表示父级元素。例如
// 父元素选择器&符号
header{
height: 200px;
width: 300px;
float: left;
div{
height: 100px;
width: 100px;
font-size: 18px;
color: red;
background: black;
&:hover{//此处&替代父级选择器，即div
background: red;
color: white;
}
&.sondiv{//此处&替代父级选择器，即div
border-radius: 10px 10px 10px 10px;
background: yellow;
color: black;
}
}
}
main, p, span, a{
display: inline-block;
width: 300px;
height: 200px;
border: 5px solid blue;
background: green;
& &{//此处会组合所有可能
border-top: none;
}
}编译后的css样式
header {
height: 200px;
width: 300px;
float: left;
}
header div {
height: 100px;
width: 100px;
font-size: 18px;
color: red;
background: black;
}
header div:hover {
background: red;
color: white;
}
header div.sondiv {
border-radius: 10px 10px 10px 10px;
background: yellow;
color: black;
}
main,
p,
span,
a {
display: inline-block;
width: 300px;
height: 200px;
border: 5px solid blue;
background: green;
}
/*此处使用了 & &组合了所有的可能*/
main main,
main p,
main span,
main a,
p main,
p p,
p span,
p a,
span main,
span p,
span span,
span a,
a main,
a p,
a span,
a a {
border-top: none;
}结合html效果如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet/less" href="less/match.less"> <link rel="stylesheet/less" href="less/nesting.less"> <script src="js/less.min.js"></script> </head> <body> <header>父元素选器，<div>子元素<div class="sondiv">子子元素</div></div></header> <main> <p>中间的一段<a>我说a标签</a><span>标签<a>我说a标签</a></span></p> </main> <footer>less的匹配模式例子</footer> </body> </html>
评论（0）
登录 后参与评论。