Less( 预处理语言)的使用方法

一、基础用法

1. 定义变量 (.less 文件)

// 颜色
@primary-color: #3498db;
@text-color: #2c3e50;// 尺寸
@padding: 15px;
@font-size: 16px;

2. 使用变量 (LESS 文件)

.header {background-color: @primary-color;padding: @padding;font-size: @font-size;
}.button {color: @text-color;border: 1px solid @primary-color;
}

二、在 HTML 中间接使用

1. 编译 LESS 到 CSS

<!-- 引入编译后的 CSS -->
<link rel="stylesheet" href="styles.css">

2. 通过 CSS 类名调用

<header class="header">标题</header>
<button class="button">点击</button>

三、动态操作变量（需借助 CSS 变量）

LESS 变量无法在运行时修改，但可结合 CSS 变量实现动态效果：

1. 在 LESS 中使用 CSS 变量

:root {--dynamic-color: @primary-color; /* 将 LESS 变量赋值给 CSS 变量 */
}.element {background: var(--dynamic-color);
}

2. 在 JavaScript 中动态修改

document.documentElement.style.setProperty('--dynamic-color', '#e74c3c');

四、LESS 变量高级用法

1. 变量插值

@prefix: my-prefix;
.@{prefix}-button {color: @text-color;
}

2. 数学运算

@base-padding: 10px;
.container {padding: @base-padding * 2; /* 20px */
}

3. 颜色函数

@primary: #3498db;
.button {background: darken(@primary, 20%); /* 颜色变深 */
}

4. 作用域

@color: red;
.scope-example {@color: blue; /* 局部作用域 */color: @color; /* 输出 blue */
}

五、工作流建议

安装 LESS 编译器：

npm install less -g

编译命令：

lessc styles.less styles.css

构建工具集成：

• Webpack: 使用 less-loader

• Vite: 内置 LESS 支持

• Gulp: 使用 gulp-less

六、注意事项

1. LESS 变量不是 CSS 变量
   LESS 变量在编译后会被替换为静态值，无法在浏览器中动态修改（需结合 CSS 变量实现）。

2. 避免在 HTML 中直接写 LESS
   浏览器无法解析 LESS 语法，必须预先编译为 CSS。