Less的学习和使用（一）_less需要学吗-CSDN博客

本文介绍了Less预处理器的基本概念，包括如何在项目中引入Less，以及如何利用Less的特性如变量、嵌套和混合来优化CSS代码。通过实例演示了Less如何帮助提升代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

less的学习和使用

最近由于项目组没有具体的前端规范，自觉协同开发或者修改他人的代码阻碍过大。。便向老大申请了制定一个规范的权限。
除了一些代码规范，我还努力的想推进组内同学一起使用less，来提高大家的代码风格。借此机会，自己也学习了更多less的内容并分享给大家。

Less是什么？

惯例，先问是什么。Less是一种预处理语言。相似的还有Sass，Stylus在这里不做探讨。

为什么选择Less

Less和其他的预处理语言相比来说功能是要少一些的，所以相应的更容易学习，上手更快

Less保留了css的内容，在其基础上添加了方法，使用起来更顺滑

本人从接触前端之初就在使用Less，也是使用了很久。

如何在项目中添加Less

可以直接引入less的文件，页面中引入 Less.js。可以使用cdn的链接或者是官网下载Less.js的文件

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

 <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>

如果是cli搭建的项目，可以在搭建的时候就直接选择使用Less，并且在需要使用的页面设置lang=less。如果没有选择怎么办?
那我们直接使用npm下载依赖就可以

	npm install less less-loader --save-dev

这里在–save后面加了-dev是将依赖下载到devDependencies我们的开发依赖中。

如果是使用webpack构建的项目，除了要下载依赖之外，还需要再webpack.config.js中修改配置。

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

Less具体使用

以前我使用Less基本就是嵌套的写法，很少情况会定义一些变量，学习了这些以后，感觉Less用的好，css也是可以写出花来的。讲了这么多，下面我们进入正题吧。

定义变量
值变量

/* Less */
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
/* 生成的 CSS */
#header {
  width: 10px;
  height: 20px;
}

属性变量

/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
  @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
#wrap{
  border-style:solid;
}

url 变量

/* Less */
@images: "../img";//需要加引号
body {
  background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
body {
  background: url("../img/dog.png");
}

最常用的就是嵌套的写法了，嵌套的写法不仅结构清晰，更不会有层级不够样式被覆盖的问题。

需要注意的是：我们需要避免层级嵌套过深的情况，减少冗余代码。建议不要超过三层。

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

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

/* 生成的 CSS */

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

混合（mixins）我们可以使用定义的类：比如我们定义了一个边框的类

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
/* 使用mixins */
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}