Less的简单介绍、使用、语法

中枢叹号

已于 2023-01-30 17:57:02 修改

阅读量2.7k

点赞数 2

文章标签： less 前端 css

于 2023-01-30 17:55:10 首次发布

本文链接：https://blog.youkuaiyun.com/NewHouser/article/details/128800005

版权

本文介绍了Less的简单介绍和使用方法，包括如何安装和配置Less插件，以及Less的语法特点，如运算、嵌套和变量。通过实例展示了Less如何提升CSS的编写效率和逻辑性，帮助开发者更好地组织和管理样式代码。

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

一、简单介绍

less是将CSS简单化的工具，并且拥有更强的逻辑性和计算能力

在使用Less时，首先需要下载Less插件，下载完成之后，代码写在less文件中，保存之后会自动生成css文件，并将生成的css文件引入网页文件中。

1、使用Less

步骤解析图如下（这里使用的是VS code）：

第一步：在插件商城中搜索 easy less，并下载

第二步：设置 less 文件的导出位置，也就是自动生成的css文件的存放路径

点击setting.json之后，每个人的代码可能不一样，但只要找到"less.compile"就行,写法如下：

"out": "存放css文件的路径（文件夹）"

注意：此方法是全局配置，一旦设置好路径，那么所有生成的css文件都会放在这个位置，如果某个less文件需要单独导出css文件至某个地方，只需要在当前less文件中写如下代码即可（写自己的存放路径，别写xx）：

// out:./xx/xx/         (导出后与less文件同名)

// out:./xx/xx/abc.css  (导出后名为abc.css)

ps：复制的话记得把括号内容删掉

第三步：编写less文件，保存后，在指定位置自动生成css文件

第四步：将生成的css文件引入至网页文件中

2、拓展

阻断导出（禁止生成css文件）
// out: false
多个less文件融合
假设有三个less文件，分别为 小弟1号.less、小弟2号.less、大哥.less，现在需要将小弟全部并入大哥，只需要在将小弟阻断导出，然后在 大哥.less 上写如下代码即可（.less后缀可不加）
@import './小弟1号.less';
@import './小弟2号';

二、Less语法

1、Less语法之运算

单位不一定是px，rem也可以

加法：10 + 11px；

减法：20 - 10px；

乘法：2 * 3px；

除法：(10 / 2px)； 或者 100 ./ 2px；

2、Less语法之嵌套

.爷爷{

爷爷的头发是白色的

.爸爸{

爸爸的头发是黑色的

.儿子{

儿子的头发是黄色的

.孙子{

孙子没有头发

                        }

                }

        }

}

与CSS不同的是，CSS是使用后代选择器，也就是说只能一层套一层，而less的嵌套语法则是可以一层套多层，见下图解：

拓展：less 的 “&”符号的使用

“&”代表当前的选择器，一般和伪元素一起使用，见以下 less 代码：

.one{
    width: 100px;
    height: 100px;
    background-color: skyblue;
    .two{
        width: 50px;
        height: 50px;
        background-color: red;
    }
    &:hover{
        background-color: green;
    }
}

注意：此代码为 .less文件

代码效果：