Less预处理——混合方法

系列文章目录

---

---

一、混合方法

1、无参数方法

方法即为声明的集合，使用时直接键入名称

备注：.card 与 .card() 是等价的。为了避免代码混淆，建议写成如下形式

index.less 文件

.card() {
    background: yellow;
    box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25);
}
#wrap {
    .card();
}
1
2
3
4
5
6
7

index.css 文件

• 自动转义后的 css 文件内容如下

#wrap {
  background: yellow;
  box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25);
}
1
2
3
4

2、默认参数方法

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数

@arguments 类似于 JS 中的 arguments 指代的是 全部参数

传的参数中 必须带着单位

index.less 文件

.border(@a:10px; @b:20px; @c:30px; @color: skyblue) {
    border: solid 1px @color;
    // @arguments 指代传进来的全部参数
    box-shadow: @arguments;
}
#wrap {
    .border();
}
1
2
3
4
5
6
7
8

index.css 文件

• 自动转义后的 css 文件内容如下

#wrap {
  border: solid 1px skyblue;
  box-shadow: 10px 20px 30px skyblue;
}
1
2
3
4

3、方法的匹配模式

与面向对象中的多态类似

示例：

• 第一个参数 left 要会找到方法中 匹配程度最高的，如果匹配程度相同，将全部选择，并存在样式覆盖替换
• 如果匹配的参数是变量，则将会匹配，如 @_

index.less 文件

.triangle(right, @width: 20px, @color: #ccc) {
    border-color: transparent @color transparent transparent;
}
.triangle(left, @width: 20px, @color: #ccc) {
    border-color: transparent transparent transparent @color;
}

.triangle(@_, @width: 20px, @color: #ccc) {
    border-style: solid;
    border: @width;
}

// 进行匹配，命中第二个，然后更新一些样式
#main {
    .triangle(left, 50px, #666)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

index.css 文件

• 自动转义后的 css 文件内容如下

#main {
  border-color: transparent transparent transparent #666;
  border-style: solid;
  border: 50px;
}
1
2
3
4
5

4、方法的命名空间

让方法更加规范

说明：

• 在 CSS 中 > 选择器，选择的是儿子元素，就是必须与父元素有直接血缘的元素
• 在引入命名空间时，如使用 > 选择器，父元素不能加括号
• 不得单独使用命名空间的方法，必须先引入命名空间，才能使用其中方法
• 子方法，可以使用上一层传进来的方法

index.less 文件

// 方法的命名空间
#card() {
    background: pink;
    .d(@w:300px) {
        width: @w;
        #a(@h: 300px) {
            height: @h;
        }
    }
}

// 父级方法 使用了 >， 不需要括号
#wrap {
    #card > .d > #a(100px);
}
#main {
    #card .d();
}
#top {
    #card;
    .d(100px;);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

index.css 文件

• 自动转义后的 css 文件内容如下

#wrap {
  height: 100px;
}
#main {
  width: 300px;
}
#top {
  background: pink;
  width: 100px;
}
1
2
3
4
5
6
7
8
9
10

5、方法的条件筛选

在 Less 中没有 if else，但它有 when

看看是否符合限制的条件

index.less 文件

#card {
    // when &&
    .border(@width, @color, @style) when (@width > 100px) and (@color=#ccc) {
        border: @style @color @width;
    }
    // when not
    .background(@color) when not (@color >= #111) {
        background: @color;
    }
    // , 逗号分隔符方法 ||
    .font(@size: 20px) when (@size > 100px), (@size < 50px) {
        font-size: @size;
    }
}

#main {
    #card > .border(500px, #ccc, solid);
    #card > .background(#222);
    #card > .font(10px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

index.css 文件

• 自动转义后的 css 文件内容如下

#main {
  border: solid #ccc 500px;
  background: #222;
  font-size: 10px;
}
1
2
3
4
5

6、数量不定的参数

方法接受数量不定的参数，可以使用 ...

index.less 文件

.boxShadow(...) {
    box-shadow: @arguments;
}
.textShadow(@a, ...) {
    text-shadow: @arguments;
}
#main {
    .boxShadow(1px, 2px, 5px, #520);
    .textShadow(1px, 2px, 5px, #1314);
}
1
2
3
4
5
6
7
8
9
10

index.css 文件

• 自动转义后的 css 文件内容如下

#main {
  box-shadow: 1px 2px 5px #520;
  text-shadow: 1px 2px 5px #1314;
}
1
2
3
4

7、使用 !important

index.less 文件

.border() {
    border: 1px solid #520;
    margin: 20px;
}
#main {
    .border() !important;
}
1
2
3
4
5
6
7

index.css 文件

• 自动转义后的 css 文件内容如下

#main {
  border: 1px solid #520 !important;
  margin: 20px !important;
}
1
2
3
4

8、循环方法

Less 没有提供 for 循环，但可以通过递归去实现

index.less 文件

.generate-columns(4);
.generate-columns(@n, @i:1) when (@i <= @n) {
    .columns-@{i} {
        width: (@i*100%/@n);
    }
    .generate-columns(@n, (@i+1));
}
1
2
3
4
5
6
7

index.css 文件

• 自动转义后的 css 文件内容如下

.columns-1 {
  width: 25%;
}
.columns-2 {
  width: 50%;
}
.columns-3 {
  width: 75%;
}
.columns-4 {
  width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12

9、属性拼接方法

+_ 代表的是空格
+ 代表的是逗号

index.less 文件

// + 表示 ,
.boxShadow() {
    box-shadow+: inset 0 0 10px #ccc;
}
#main {
    .boxShadow();
    box-shadow+: 0 0 20px #666;
}

// +_ 表示 空格
.Animation() {
    transform+_: scale(2);
}
.main {
    .Animation();
    transform+_: rotate(15deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

index.css 文件

• 自动转义后的 css 文件内容如下

#main {
  box-shadow: inset 0 0 10px #ccc, 0 0 20px #666;
}
.main {
  transform: scale(2) rotate(15deg);
}
1
2
3
4
5
6

10、实战小技巧

计算平均值

index.less 文件

.average(@x, @y) {
    @average: ((@x + @y) / 2)
}
div {
    .average(16px, 50px);
    padding: @average;
}
1
2
3
4
5
6
7

index.css 文件

• 自动转义后的 css 文件内容如下

div {
  padding: 33px;
}
1
2
3

这里是 前端杂货铺，期待您的 三连 + 关注