less高阶用法而不是只会在less写css很多时候大家都只会在less里面写纯css 但是灵活运用好以下几种方式

很多时候大家都只会在less里面写纯css 但是灵活运用好以下几种方式可以让你的less少写很多重复代码！！

1.变量

//定义一个变量
@border-color : #b5bcc7;
.mythemes tableBorder{
  border : 1px solid @border-color;
}

变量最常用的场景，像字体颜色，背景颜色，边框样式等进行统一定义，统一定义图片资源路径。变量是可以进行算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。 2.混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法,组成一个新的classs属性如果需要在混合中不限制参数的数量，可以在变量名后添加“...”，表示这里可以使用多个参数在 LESS 里，@arguments 变量表示所有的变量，很多时候通过使用它，我们可以少写很多代码

.mixin1 (...) {
 padding:@arguments;
 }

如果是不接收任何参数的话

.mixin () {
height : 131px;
}

接收 0-1 个参数

.mixin (@a: #fff) {
color : @a;
}

接受 0-N 个参数

mixin4 (@a: 1, ...) {
margin : @arguments;
}

合并多个css 下面可以看出是class right-bar+top-text-wrapper+flex-col+items-center的样式合并等同于scss include的写法

.right-bar {
.top-text-wrapper();
.flex-col();
.items-center();
color: red;
font-size: 0.12rem;
line-height: 0.17rem;
white-space: nowrap;
font-weight: 400;
}

3.嵌套我们平时在编写 css 的时候，经常会遇到多层选择器嵌套的情况

#header {
    color: black;
}
#header .navigation {
    font-size: 12px;
}
#header .logo {
    width: 300px;
}

嵌套写法

#header {
    color: black;
    .navigation {
      font-size: 12px;
    }
    .logo {
      width: 300px;
   }
}

4.作用域首先在本地查找变量，如果找不到，则从“父”级作用域继承

 @var: red;
 .foot {
     @var: white;
     .item {
      color: @var;
     }
 }

5.字符串插值

.test(@domain){
  background-image: url("@{domain}/img/test.png");
}
<!-- 使用 -->
.el-a{
  .test('http://asset.img.com ');
}
<!-- 输出 -->
.el-a {
  background-image: url("http://asset.img.com/img/test.png ");
}

6.在 LESS 中使用 JS

.el-a{
  font-size: 12px;
  color: #f00;
  &:before{
    @arr: 'hello', 'world';
    content:  `@{arr}.join(' ').toUpperCase()` ;
  }
}
<!-- 输出结果 -->
.el-a:before {
  content: "HELLO WORLD";
}

虽然说，能在 LESS 中使用 JS 是一件很让人兴奋的事，但实际上...除了极少时候需要做字符串处理外

<!-- https://www.w3cschool.cn/less/less_merge.html -->
/* 常用内置函数方法 */ 
escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 'red' 值（红色）
green(@color); // 从颜色值中提取 'green' 值（绿色）
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

less高阶用法 而不是只会在less写css

less高阶用法而不是只会在less写css