系列文章目录

一   
    
    、混合方法

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; }

这里是 前端杂货铺  


  


  ，期待您的 三连 + 关注