smartzeng


完美起航

less学习之初步二

  • ~5.32K 字

一、混合定义函数及混合函数的传参

less定义多个具有相同名称和参数数量的混合是合法的。带多个参数的混合,参数用分号分割，逗号会作为列表传递，即如果传参的括号里面全部都是以逗号分割，那么会依次传给各个参数值，如果传参的括号里面既有逗号也有分号，则会把分号前面的看做一个整体传给一个参数值。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.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;);//此处则是作为三个参数传递
}

上述编译后结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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的函数支持命名参数的形式传参，例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//命名参数
.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)
}

编译的结果为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.class1 {
  color: #ff0000;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #ffff00;
  margin: 10px;
  padding: 40px;
}
.class3 {
  color: #000000;
  margin: 10px;
  padding: 80px;
}

三、函数的匹配模式级函数变量返回值

定义多个相同名称的函数，通过匹配调用不同函数，函数变量返回值即在函数中将计算的结果赋值给变量。例如 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 匹配模式
.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如下 

1
2
3
4
5
6
7
8
9
10
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替代所有函数参数，例如

1
2
3
4
5
6
7
8
//arguments变量，代表所有可变参数
.border(@x: solid, @c: red) {
  border: 21px @arguments;
}

.div1 {
  .border();
}

编译后css样式如下

1
2
3
.div1 {
  border: 21px solid #ff0000;
}

五、less的嵌套及&的符号

less可以通过嵌套的方式减少代码冗余，使用&可以表示父级元素。例如 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 父元素选择器&符号
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样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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效果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>

blob.png

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可