Less 使用小结

参考：Less 中文教程

在react项目中配置使用

使用create-react-app 创建的项目，使用less;

最新的less-loader 配置有问题，采用5.0.0

npm install less-loader@5.0.0

在配置中config-overrides.js ，自定义配置查看customize-ora配置

/**
 * creat-react-app 覆盖配置
 */
const {
    override,
    addLessLoader,
  } = require("customize-cra"); 
  
module.exports = override(
    addLessLoader({
        javascriptEnabled:true,
    })
);

基本应用

变量

使用@声明，变量之间可进行运算操作；

@box-bg:rgba(12,123,56,9);
.less-box{
    background-color: @box-bg;
    color: #fff;
}

选择器名称、属性名称、URL地址、import语句声明

选择器名称:

@box-item:item;
.@{box-item}{
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

URL地址：

@imgUrl:"../../static/images";
.less-box{
   	background-image: url("@{imgUrl}/less-bg.png");
}

属性名称，使用方式@{变量名}：

@borderColor:border-color;

.less-box{
    @{borderColor}:red;
}

作为变量的值,访问时需要配合@@访问变量值：

@base-size:14px;
.less-box{
    @p-size:base-size;
    p:nth-child(1){
        font-size: @@p-size + 4px;
    }
}   

属性可作为变量使用$属性名

可通过内部的属性名，复用其属性值。

@borderColor:border-color;
.less-box{
    @{borderColor}:red;
    p:nth-child(2){
    	// 此处会应用到父级的边框颜色
        color:$border-color;
    }
}

混合（Mixins）

通过引用其他选择的样式。可用的类选择符、ID选择符

@box-bg:rgba(12,123,56,9);
.item{
    font-size: 14px;
    color: #fff;
}
.less-box{
    background-color: @box-bg;
    p:nth-child(1){
        .item();
        font-size: 16px;
    }
} 

被复用选择器样式不生效

要使得该选择器样式不生效，只作为公用，直接书写.item()，则最终输出不会有.item的样式：

.item(){
    font-size: 14px;
    color: #fff;
}
.less-box{
    p:nth-child(1){
        .item();
        font-size: 16px;
    }
} 

命名空间

处理之间混合复用外，可针对复杂场景内部嵌套选择器混合。

.less-box{
	p:nth-child(7){
        .block .span();
    }
}

三种书写都是一样的，.block.span() / .block > .span()

!important 处理

标记所有的属性为!important

.less-box{
    p:nth-child(7){
        .item() !important;
    }
} 

// 同
.less-box p:nth-child(7) {
    color: teal !important;
}

带参数处理arguments

带参数可以处理一些复杂的公用样式@** 表示。

多个参数表示：

1. 带参数处理，传入自定义属性值；

   // 带参数处理
   .font-color(@color){
       color: @color;
   }
   .less-box{
   	p:nth-child(8){
           .font-color(#2910b3);
       }	
   }
   

2. 一组作为一个参数表示（类数组参数）：.name(param1,param2,param3;)即逗号分割，

   // 带参数处理
   .font-color(@color,@size){
       color: @color;
       font-size:@size;
   }
   .less-box{
   	p:nth-child(8){
           .font-color(#3112e4,32px);
       }	
   }
   

   或者 ，可设置参数默认值@size: 24px；也可通过;划分参数；

   .font-color(@color;@size:24px){
       color: @color;
       font-size:@size;
   }
   .less-box{
   	p:nth-child(8){
           .font-color(#3112e4);
       }	
   }
   

3. 非群组参数，多参数表示即.name(param1,param2,param3)

4. 可以使用 rest 参数，

   .minxin(...);     // 匹配0-n 个参数
   .minxin(@size:10px);  // 有默认值，可匹配 0 -1 个参数
   .minxin(@size:10px,...); // 匹配 0 - n 个参数
   .minxin(@size;...); // 无默认值，匹配1- n 个参数
   

   可通过@arguments 获取所有的参数；

5. 模式匹配，可通过定义标识匹配要混合的样式；
   主要是针对同选择器名的混合器，可通过不同标识区分；

   // 带参数处理
   .font-color(grey;@color;@size:24px){
       color: @color;
       font-size: @size;
   }
   .font-color(black;@color;@size:32px){
       color: @color;
       font-size: @size;
   }
   .less-box{
   	p:nth-child(8){
           .font-color(black;#3112e4);
       }	
   }
   

   同名时通过标识处理混合样式；

6. 作为方法调用计算并返回值；

7. 递归处理when 判断条件，内部递归调用；

嵌套

在内部嵌套中&标识当前父级，其他选择和普通的css一致。
@规则嵌套在选择器元素内部。

@box-bg:rgba(12,123,56,9);

.item{
    font-size: 14px;
    color: #fff;
}

.less-box{
    background-color: @box-bg;
    p:nth-child(1){
        @media screen and (max-width:500px) {
            font-size: 12px;
        }
        .item();
        font-size: 16px;
    }
}  

& 可作为字符串变量使用

 .less-box{
 	&-item{
        font-size: 20px;
    }
 }
 // 同等于
.less-box-item{
	font-size: 20px;
}	

& 多次使用

& 对应父级选择器，如果是多层嵌套，多次使用&则按层级对应。

一层嵌套&多次使用：

.less-box{
	&&-less{
        padding:20px;
    }
}
// 同等于
.less-box.less-box-less {
    padding: 20px;
}

多层嵌套，多次使用&:

.less-box{
	.item{
        &&{
            color: #ffff00;
        }
    }
}
// 同等于
.less-box .item.less-box .item {
    color: #ffff00;
}

& 排列所有父级组合；更改选择器的顺序；

运算符

包括+、-、*、%可以对任意数字、颜色、变量进行计算。依据以左侧操作数单位为准进行换算；

@base-size:14px;
.less-box{
    p:nth-child(1){
        font-size: @base-size + 4px;
    }
}   

转义

可声明字符串作为属性、变量值，进行引用。不同于变量的存在，可作为属性名。

函数

可处理一些逻辑操作，内置函数包括转换颜色、处理字符串、算术运算符等。

命名空间和访问符

可以对一些用于混合的样式进行分组。

映射

可以设置一组混合和规则集

高级进阶

除了常用的一些特性之外，还有一些方便属性复用的操作。

extend 关键字

用于将其他选择器的属性复用合并到自己的样式中。

// 外部公用的样式设置
.inline{
    color:greenyellow;
}
.less-box{
	p:nth-child(5){
        &:extend(.inline);
    }
}

// 同等于
.inline, .less-box p:nth-child(5) {
    color: greenyellow;
}

也可以写到外部，即p:nth-child(5):extend(.inline) :extend 语法必须书写在选择器之后

• all 关键字可以将该选择器下的子元素样式也复制引用。

  .inline{
      color:greenyellow;
      span{
          color:royalblue;
      }
  }
  .less-box{
  	p:nth-child(5):extend(.inline all){};	
  }
  

  .inline span 样式同样会应用到p:nth-child(5) span;

• 可以多次使用:extend语法，连续调用；或者:extend()可包含多个选择器。

  .inline{
      color:greenyellow;
      span{
          color:royalblue;
      }
  }
  .block{
      color:hotpink;
      span{
          color:teal;
      }
  }
  .less-box{
  	p:nth-child(5):extend(.inline all,.block all){};	
  }
  

  最终的结果是.block 会覆盖.inline的样式。

• 部分引用，即.inline span

  .less-box{
  	p:nth-child(5):extend(.inline all,.block span){};	
  }
  

  此时的结果，将.block span的样式应用到p:nth-child(5)。

• 同样地，在:extend()中可以使用已声明的选择器名称。

属性聚合

主要针对一些多值得属性，比如：背景、动画等。通过+表示逗号(,)、+_表示空格()追加。

.block-scale(){
    transform+_: scale(.6);
}
.less-box{
	p:nth-child(6){
        .block-scale();
        transform+_: translate(50px);
    }
}

// 最终形成
.less-box p:nth-child(6) {
    transform: scale(0.6) translate(50px);
}