Less语法知识点

Less 编译Less

编译Less指的是将Less代码编译成css代码。这个行为应该由谁来完成？

在体验Less案例中，我们引入了一个Less.js文件。

编译过程是发生在前端的。会导致用户比较晚的看到页面。

浏览器端编译Less:

如果使用的是style标签书写的less代码，请必须将type属性修改为text/less

<style type="text/less">……</style>

如果使用的是link标签书写的外链less代码，请必须将rel属性修改为stylesheet/less:

<link red="stylesheet/less" href="./index.less" type="text/css">

再引入less.js文件

服务器端编译Less:

浏览器端编译Less会导致用户体验差，所以我们通常会在开发的时候通过工程化将写好的less文件编译成css文件，再上传。

第一种:NodeJS编译Less

需要下载less模块

npm install less

demo: 通过lessc命令将less文件转换成css

第一种使用方式 lessc xxx.less 此时将只会在控制台中显示编译之后的结果

第二种使用方式 lessc xxx.less xxx.css 此时会生成xxx.css文件 内容就是编译之后的内容

webpack编译Less

所需模块: style-loader css-loader less-loader less

下载：

npm install style-loader css-loader less-loader less

Less语法 变量

嵌套式写法已经体验过，这里过。

Less中允许我们定义变量。

语法： @key: value;

等价于JS: var key = value;

@a: 100px;
#box {
   width: @a * 10;
}

混合

所谓的混合其实就是对选择器的复用

#box {
  background-color: red;
}

#box1 {
    #box; //就等价于将#box的样式应用在这里
}

方法

注意，混合，复用的是属性名和属性值。

有些时候，我们希望拥有相同的属性名称，但是不希望值也被复用。此时可以通过定义方法实现。

举例:

.method(@w, @h, @bgc) {
 width: @w;
 height: @h;
 background-color: @bgc;
}
.box {
  .method(200px, 200px, red);
}

方法的默认参数

与ES6一样，方法都可以拥有默认的参数值。也就是在调用方法的时候不传递参数，可以拥有值。

ES6:

function fun(a=1, b=2) {
    console.log(a + b);
}
fun(2, 3); => 5
fun(); => 3

Less:

.method(@w:50px, @h:50px, @bgc:black) {
  width: @w;
  height: @h;
  background-color: @bgc;
}
.box2 {
  .method();
}

方法中的条件语句

when() 当符合条件时 生效

when() and () 当符合条件时 并且符合另外一个条件时 生效

when not() 当不符合条件时生效

.method(@w, @h) when(@w > 100px) {
  width: @w;
  height: @h;
  background-color: red;
}

插值语法

EJS的插值语法: <%%>

ES6的插值语法: ${}

Less的插值语法: @{}

demo：

@str: "nihao";
 .box:before {
    content: "aaaaa@{str}bbbbbb";
}

运算

加法运算、减法运算、乘法运算、除法运算

都遵循一个规则，就是当两个运算数都有单位时 会使用第一个运算数的单位。

demo:

width: 20in / 10px;

注：当两者只有一个有单位，则使用该单位 如果都没有 则只进行运算 至于值是否生效要看属性的具体状况。

数字运算函数

Less借鉴了Math对象。实现了一些函数功能。

ceil: 向上取整

floor: 向下取整

round: 四舍五入

percentage: 百分比

demo:

@w: 50.444px;
width: ceil(@w); /* 51px */

字符串函数

e: 原样输出字符串

escape: 转义

replace: 替换

content: escape("a=1");

定义颜色方式

单词定义： red、blue、orange等

rgb三原色: rgb(红，绿，蓝);

rgba: rgba(红，绿，蓝，透明度);

hsl工业色彩: hsl(色阶, 饱和度, 明度)

hsla: hsla(色阶，饱和度，明度，透明度)

十六进制：#rrggbb;

十六进制: #rrggbbaa;

颜色通道

red() 获取红色通道

green() 获取绿色通道

blue() 获取蓝色通道

alpha() 获取透明度

hue() 获取色相值

saturation() 获取饱和度

lightness() 获取明度

定义颜色

@red: red;

@blue: rgb(0, 0, 255);

@lightBlue: rgba(0, 0, 255, .5);

@green: #0f0;

@lightGreen: #00ff0055;

@hslcolor: hsl(30, 30%, 30%);

定义新的颜色 该颜色是其他颜色的单色组成的 红色是颜色A的 绿色是颜色B的 蓝色是颜色C的

获取@blue的红色

@red1: red(@blue);

获取@hslcolor的绿色

@green1: green(@hslcolor);

获取@lightGreen的蓝色

@blue1: blue(@lightGreen);

@newColor: rgb(@red1, @green1, @blue1);

调整颜色

saturate(hslColor, percent) 该方法用于调高饱和度

hslColor: 一个颜色

percent: 饱和度提高的百分比数值

desturate(hslColor, percent) 该方法用于降低饱和度

hslColor: 颜色

percent: 饱和度降低的百分比数值

demo:

@color: hsl(180, 60%, 40%);
@color1: saturate(@color, 20%);  /* hsl(180, 80%, 40%)*/
@color2: desaturate(@color, 20%);

从上到下，分别是@color1 @color @color2

lighten(hslColor, percent): 该方法用于调高亮度

hslColor: 颜色

percent: 亮度提高的百分比数值

darken(hslColor, percent): 该方法用于降低亮度

hslColor: 颜色

percent: 亮度降低的百分比数值

demo：

@color: hsl(180, 60%, 40%);
@color1: lighten(@color, 20%);  /* hsl(180, 60%, 60%)*/
@color2: darken(@color, 20%); /* hsl(180, 60%, 20%) */

从上到下 分别是@color1 @color @color2

fadeIn(color, opacity); 调高透明度 变得更不透明

color: 颜色

opacity: 透明度的百分比数值

fadeOut(color, opacity); 调低透明度 变得更透明

color: 颜色

opacity: 透明度的百分比数值

fade(color, opacity); 调整透明度至某一个值

color: 颜色

opacity: 透明度百分比数值

@color: hsla(180, 60%, 40%, .5);
@color1: fadeIn(@color, 20%);  /* hsla(180, 60%, 40%, .7)*/
@color2: fadeOut(@color, 20%); /* hsl(180, 60%, 40%, .3) */
@color3: fade(@color, 100%); /* hsla(180, 60%, 40%, 1)*

从上到下依次是: @color1 @color @color2 @color3

最后

作者每周都会发布不错的文章，供大家学习，欢迎大家关注。

微信搜索【前端每日技巧】关注公众号，写作不易，希望能点赞👍️加收藏❤️和转发。