前端开发必学的Less实用指南（详细版）

最新推荐文章于 2024-05-08 21:02:19 发布

22x艾克斯

最新推荐文章于 2024-05-08 21:02:19 发布

阅读量3k

点赞数 18

文章标签： less 前端 css

本文链接：https://blog.csdn.net/xllllll___/article/details/136028214

版权

一.什么是Less

Less(Leaner Style Sheets的缩写)，它是一门向后兼容的CSS扩展语言，Less和Css两者之间是非常像的，因此，如果有CSS基础，学起Less也是比较容易的。Less和其他预处理在本质上都是JS库，这些库的作用是将预处理代码编译成标准的CSS代码，所以我们使用预处理器可以通过多种方式来使用。

二.Less的使用方式

1.直接引用JS文件

使用JS直接使用Less的时候需要注意，link的标签需要在less.js之前引入，并且link标签的rel属性要设置为stylesheet/less.

<head>
    <title>Less使用指南</title>
    //引入自己写的less代码
    <link rel="stylesheet/less" type="text/css" href="index.less">
    //引入Less.js的核心库
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
</head>

2.通过npm全局安装来使用less

通过npm全局安装

npm install less -g

-g参数表示将lessc命令安装到全局环境，如果想要安装特定的版本，可以在包名称后面添加@版本号，如npm install less@2.7.1 -g.

在命令行中运行如下代码就可以将test.less编译为test.css。

lessc test.less test.css

但是在命令行中手动去编译less文件为css文件的这种使用频率不高，因为大多数情况下，作为前端一般都使用Vue,React等主流框架进行开发，所以我们大多数情况下都会在Webpack中使用Less.

3.在Webpack中使用Less

由于Webpack本身只能处理js文件，所以需要借助less-loader来帮忙处理Less文件

//下载less,less-loader
npm install less less-loader -save-dev
//下载css-loader,style-loader
npm install css-loader style-loader -save-dev

配置webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i, loader: [
          // 将 less 文件编译成 css 文件，注意 Webpack Loader 加载顺序从右到左
          'style-loader', 'css-loader', 'less-loader'
        ]
      }
    ]
  }
};

实际上，在使用像Vue这样的框架时，官方的CLI脚手架已经帮我们集成了css预处理器，不需要我们自己手动进行Webpack的配置，在使用脚手架初始化项目的时候勾选上自己喜欢的预处理器就好了。

三.Less的具体用法

1.嵌套

less支持以嵌套的方式去写css代码，不过多赘述，直接上代码

按照父类嵌套子类规范来书写的css：

/*CSS写法*/
.msg-list{
    width: 500px;
    padding: 16px 20px;
    max-height: 500px;
}
.msg-list .msg-item{
    height: 200px;
    left: 20px;
}
.msg-list .msg-item .msg-item-title{
    color: antiquewhite;
    font-size: 24px;
}

使用Less嵌套写法：

/*Less写法*/
.msg-list{
    width: 500px;
    padding: 16px 20px;
    max-height: 500px;
    .msg-item{
        height: 200px;
        left: 20px;
        &-title{
            color: antiquewhite;
            font-size: 24px;
        }
    }
}

以上这两种写法在页面上得到的效果是一样的，但是我们可以直观地感受到Less的写法更优雅，更简洁,在Less写法中支持嵌套使用父选择器&，这样写起来更简洁优雅，不需要再去嵌套复杂的css代码了。

2.Less中的变量

在Less中，支持想JS中声明一个变量，在变量声明时需要以@开头，并且需要以分号来结束声明，在使用时直接用变量名来替换设置的样式值即可。代码如下：

/*Less写法*/
/* 声明变量 */
@fontSize: 16px;
@height: 500px;
/* 使用变量 */
.msg-list{
    height: @height;
    font-size:@fontSize;
    line-height:@height;
}

编译后的CSS代码：

/* CSS代码 */
.msg-list{
    height: 500px;
    font-size: 16px;
    line-height: 500px;
}

使用变量的好处就是，我们可以将公共的样式值抽离出来，如果多个模块文件共用变量时，我们就可以将这些公共的样式值放在一个单独的文件中，然后使用@import导入。

3.导入使用

下面是一个公共文件的public.less的代码：

@text-size: 20px;
@text-color:black;
@text-title-color:pink;
@text-title-size:36px;

在业务模块中就可以通过@import来使用public.less中的一些变量：

@import "public.css":
.msg-item{
    font-size: @text-size;
    color: @text-color;
    &-title{
        font-size: @text-title-size;
        color:@text-title-color;
    }
}

4.插值用法

以上的例子都是用在CSS中的属性值，其实变量还能以插值的形式在选择器名称，属性名称，URL路径以及@import声明中使用，插值用法类似于JS模板字符串，在使用时首先定义一个变量a，然后以@{a}的方式去使用：

/* 定义变量 */
@slec:banner;
@fontSize:font-size;
@imgPath:img-path;
.@{slec}{
    @{fontSize}:16px;
    font-weight:bold;
    maigin:auto;
    background-img:url("@{imgPath}/1.png");
}

编译后：

.banner{
    font-size: 16px;
    font-weight: bold;
    margin: auto;
    background-img:url("img-path/1.png");
}

5.混合

熟悉Vue框架的对mixin应该很熟悉，Less中的混合就和Vue中的mixin的概念差不多，Less中的混合就是一个设置了属性的选择器a混入选择器b中，这样，选择器b中既有选择器b本身设置的属性也包含选择器a中的属性，Less混合代码如下：

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
.box-wrap{
    padding: 8px 16px;
    border: 1px solid black;
    .flex-center();
}

编译后的CSS代码如下：

.box-wrap{
    padding: 8px 16px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

以上的用法都是固定的属性，其实混合还可以带参数使用，这种用法跟 JS 函数非常类似

.size(@s) {
  width: @s;
  height: @s;
}
// 默认参数
.br(@r: 4px) {
  border-radius: @r;
}

.box {
  padding: 4px;
  .size(20px);
  .br();
}

编译后的CSS如下：

.box {
  padding: 4px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

另外需要注意的是，Less 代码编译时，会把混合代码也选择渲染出来，如果不想保留混合原本的代码，定义的时候可以在它后面加上 () ；此外，在混合代码后面加上!important,所有的属性都会加上!important。

6.函数与计算

Less中使用函数和计算的频率并不是特别高，因为CSS本身就是负责页面样式的，计算的事情还是交给JS处理比较好，在这里也就以颜色计算和图片尺寸计算简单地说一下：

// 假设有一个16进制的颜色值，需要取它的不透明度为50%的值，有几种做法：
// 16进制的颜色值
@color: #ea78bc;

// 做法1：去找一个可以将16进制转成rgb的网站，将其转为rgb形式后再用rgba表示
@colorRgb: rgb(234, 120, 188); // 16进制 -> rgb
@colorResult1: rgba(234, 120, 188, 0.5);

// 做法2：使用Less提供的red、green、blue函数获取rgb值，再用rgba表示
@colorResult2: rgba(red(@color), green(@color), blue(@color), 0.5);

// 做法3：使用fade、fadeout函数直接处理
@colorResult3: fade(@color, 50%); // 设置颜色的不透明度
@colorResult4: fadeout(@color, 50%); // 增加颜色的不透明度

以上得到的颜色效果是一样的

图片相关函数：

// 返回图片宽高
@imgSize: image-size("image.jpg"); // output: 100px 100px

// 返回图片宽
@imgWidth: image-width("image.jpg"); // output: 100px

// 返回图片高
@imgHeight: image-height("image.jpg"); // output: 100px

// 返回图片的base64数据
@imgUrl: data-uri('./image.jpg'); // output: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==')

.box-wrap {
  width: @imgWidth;
  height: @imgHeight;
  background-image: @imgUrl;
  background-size: @imageSize;
}

在上述代码中，由于不确定图片尺寸而无法精确涉及元素样式时，Less中和图片有关的函数就起作用了。

关于计算属性，在Less官网中给的定义是这样的：

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

如果光看官网中的解释可能会有点抽象，在代码中诠释这段话的具体代码如下：

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm 
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm 

// conversion is impossible 
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px 

// example with variables 
@base: 5%;
@filler: @base * 2; // 结果是 10% 
@other: @base + @filler; // 结果是 15%

22x艾克斯

关注

18
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
前端开发必学的Less实用指南（详细版）

Less(Leaner Style Sheets的缩写)，它是一门向后兼容的CSS扩展语言，Less和Css两者之间是非常像的，因此，如果有CSS基础，学起Less也是比较容易的。Less和其他预处理在本质上都是JS库，这些库的作用是将预处理代码编译成标准的CSS代码，所以我们使用预处理器可以通过多种方式来使用。
复制链接

扫一扫