Less预处理——混合方法

系列文章目录

文章目录

一、混合方法

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 00 10px #ccc;}
#main {.boxShadow();
    box-shadow+:00 20px #666;}// +_ 表示 空格.Animation(){
    transform+_:scale(2);}.main {.Animation();
    transform+_:rotate(15deg);}

index.css 文件

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

#main {
  box-shadow: inset 00 10px #ccc,00 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;}

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