一、混合方法
1、无参数方法
方法即为声明的集合，使用时直接键入名称
备注：.card 与 .card() 是等价的。为了避免代码混淆，建议写成如下形式
index.less 文件
.card() { background: yellow; box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25); } #wrap { .card(); }
index.css 文件
- 自动转义后的 css 文件内容如下
#wrap { background: yellow; box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25); }
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(); }
index.css 文件
- 自动转义后的 css 文件内容如下
#wrap { border: solid 1px skyblue; box-shadow: 10px 20px 30px skyblue; }
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) }
index.css 文件
- 自动转义后的 css 文件内容如下
#main { border-color: transparent transparent transparent #666; border-style: solid; border: 50px; }
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;); }
index.css 文件
- 自动转义后的 css 文件内容如下
#wrap { height: 100px; } #main { width: 300px; } #top { background: pink; width: 100px; }
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); }
index.css 文件
- 自动转义后的 css 文件内容如下
#main { border: solid #ccc 500px; background: #222; font-size: 10px; }
6、数量不定的参数
方法接受数量不定的参数，可以使用 ...
index.less 文件
.boxShadow(...) { box-shadow: @arguments; } .textShadow(@a, ...) { text-shadow: @arguments; } #main { .boxShadow(1px, 2px, 5px, #520); .textShadow(1px, 2px, 5px, #1314); }
index.css 文件
- 自动转义后的 css 文件内容如下
#main { box-shadow: 1px 2px 5px #520; text-shadow: 1px 2px 5px #1314; }
7、使用 !important
index.less 文件
.border() { border: 1px solid #520; margin: 20px; } #main { .border() !important; }
index.css 文件
自动转义后的 css 文件内容如下
#main { border: 1px solid #520 !important; margin: 20px !important; }
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)); }
index.css 文件
- 自动转义后的 css 文件内容如下
.columns-1 { width: 25%; } .columns-2 { width: 50%; } .columns-3 { width: 75%; } .columns-4 { width: 100%; }
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); }
index.css 文件
- 自动转义后的 css 文件内容如下
#main { box-shadow: inset 0 0 10px #ccc, 0 0 20px #666; } .main { transform: scale(2) rotate(15deg); }
10、实战小技巧
计算平均值
index.less 文件
.average(@x, @y) { @average: ((@x + @y) / 2) } div { .average(16px, 50px); padding: @average; }
index.css 文件
- 自动转义后的 css 文件内容如下
div { padding: 33px; }
