1. 编写 Less 文件：
首先，创建一个 Less 样式文件，通常使用 .less 扩展名。例如，你可以创建一个名为 styles.less 的文件：
// styles.less
@primary-color: #3498db;
body {
background-color: @primary-color;
}
h1 {
color: darken(@primary-color, 10%);
}
2. 引入 Less.js 或使用编译工具：
a. 使用 Less.js：
在 HTML 文件中引入 Less.js，然后通过 <link> 标签引入 Less 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Less in Browser</title>
<!-- 引入 Less.js -->
<script src="https://cdn.jsdelivr.net/npm/less@3.15.1/dist/less.min.js"></script>
<!-- 引入 Less 文件 -->
<link rel="stylesheet/less" type="text/css" href="styles.less">
</head>
<body>
<h1>Hello, Less in Browser!</h1>
</body>
</html>
在这个例子中，Less.js 会实时编译 styles.less 文件，并将样式应用到页面。
b. 使用编译工具：
你也可以在开发阶段使用 Less 编译工具，将 Less 文件编译为标准的 CSS 文件，然后在生产环境中只引入编译后的 CSS 文件。常用的 Less 编译工具包括 lessc 命令行工具、Webpack、Gulp 等。
例如，使用 lessc 编译 styles.less 文件：
lessc styles.less styles.css
然后在 HTML 文件中引入编译后的 CSS 文件：
<link rel="stylesheet" type="text/css" href="styles.css">
3. 在浏览器中查看效果：
打开 HTML 文件，你应该能够看到 Less 文件定义的样式已经应用到页面上。
请注意，使用 Less.js 实时编译适合开发阶段，但在生产环境中，最好使用预先编译的 CSS 文件以提高性能。
转载请注明出处：http://www.zyzy.cn/article/detail/4312/Less