上一篇
在HTML中使用Less，需引入
Less文件（rel=”stylesheet/less”）和less.js编译器，将Less样式链接置于head，less.js置于body末尾，运行时自动编译为CSS并生效。
<style>
.less-guide {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
.section {
background: #fff;
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border: 1px solid #eee;
}
h3 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-top: 0;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
margin: 20px 0;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
}
.code-comment { color: #d4d0ab; }
.code-tag { color: #f92672; }
.code-attr { color: #a6e22e; }
.code-val { color: #e6db74; }
.warning-box {
background: #fff8e1;
border-left: 4px solid #ffc107;
padding: 15px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
.tip-box {
background: #e8f5e9;
border-left: 4px solid #4caf50;
padding: 15px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
.steps {
counter-reset: step-counter;
margin-left: 20px;
}
.steps li {
counter-increment: step-counter;
margin-bottom: 15px;
position: relative;
padding-left: 30px;
}
.steps li:before {
content: counter(step-counter);
background: #3498db;
color: white;
font-weight: bold;
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border-radius: 50%;
text-align: center;
line-height: 24px;
}
.reference {
font-size: 0.9em;
color: #7f8c8d;
border-top: 1px dashed #ecf0f1;
padding-top: 15px;
margin-top: 30px;
}
.highlight {
background: #fffde7;
padding: 2px 5px;
border-radius: 3px;
font-weight: 600;
}
</style>
<div class="less-guide">
<div class="section">
<h3>什么是Less？为什么要在HTML中使用？</h3>
<p>Less（Leaner Style Sheets）是一种CSS预处理器，通过添加变量、嵌套规则、混合（mixins）、函数等特性扩展了CSS功能，它能：</p>
<ul>
<li>提升CSS代码的<b>可维护性</b>（例如通过变量统一管理主题色）</li>
<li>减少重复代码（通过混合复用样式片段）</li>
<li>实现动态计算（如颜色运算、尺寸比例计算）</li>
<li>通过模块化组织代码（@import分割文件）</li>
</ul>
<p>在HTML中使用Less能显著提升开发效率，但需通过编译转换为浏览器可读的标准CSS。</p>
</div>
<div class="section">
<h3>方法1：浏览器端实时编译（适合开发环境）</h3>
<div class="warning-box">
<strong>注意：</strong> 此方式会降低页面加载性能，仅推荐开发调试使用，生产环境应使用预编译方案。
</div>
<ol class="steps">
<li>引入Less核心文件</li>
<div class="code-block">
<!-- 通过CDN引入Less.js --><br>
<<span class="code-tag">link</span> <span class="code-attr">rel</span>=<span class="code-val">"stylesheet/less"</span> <span class="code-attr">type</span>=<span class="code-val">"text/css"</span> <span class="code-attr">href</span>=<span class="code-val">"styles.less"</span> /><br>
<<span class="code-tag">script</span> <span class="code-attr">src</span>=<span class="code-val">"https://cdn.jsdelivr.net/npm/less@4"</span>></<span class="code-tag">script</span>>
</div>
<li>创建Less文件（styles.less）</li>
<div class="code-block">
<span class="code-comment">// 定义变量</span><br>
<span class="highlight">@primary-color</span>: #3498db;<br>
<span class="highlight">@padding-base</span>: 15px;<br><br>
<span class="code-comment">// 嵌套规则 & 混合</span><br>
.<span class="highlight">button</span> {<br>
padding: @padding-base;<br>
background: @primary-color;<br><br>
<span class="code-comment">// 嵌套伪类</span><br>
&:hover {<br>
opacity: 0.9;<br>
}<br><br>
<span class="code-comment">// 调用混合</span><br>
.<span class="highlight">border-radius(5px)</span>;<br>
}<br><br>
<span class="code-comment">// 定义混合</span><br>
.<span class="highlight">border-radius</span>(@radius) {<br>
-webkit-border-radius: @radius;<br>
-moz-border-radius: @radius;<br>
border-radius: @radius;<br>
}
</div>
<li>在HTML中使用编译后的样式</li>
<div class="code-block">
<<span class="code-tag">button</span> <span class="code-attr">class</span>=<span class="code-val">"button"</span>>点击我</<span class="code-tag">button</span>>
</div>
</ol>
</div>
<div class="section">
<h3>方法2：预编译为CSS（生产环境推荐）</h3>
<div class="tip-box">
<strong>最佳实践：</strong> 预编译解决性能问题，可使用工具自动化构建
</div>
<ol class="steps">
<li>安装Node.js和Less编译器</li>
<div class="code-block">
npm install -g less
</div>
<li>编译Less文件</li>
<div class="code-block">
<span class="code-comment"># 终端执行（将styles.less编译为styles.css）</span><br>
lessc styles.less styles.css
</div>
<li>HTML中引入生成的CSS</li>
<div class="code-block">
<<span class="code-tag">link</span> <span class="code-attr">rel</span>=<span class="code-val">"stylesheet"</span> <span class="code-attr">href</span>=<span class="code-val">"styles.css"</span>>
</div>
</ol>
<p><strong>自动化构建示例：</strong></p>
<div class="code-block">
<span class="code-comment">// package.json配置监听编译脚本</span><br>
"scripts": {<br>
"watch:less": "less-watch-compiler src dist"<br>
}
</div>
</div>
<div class="section">
<h3>方法3：前端构建工具集成（现代开发标准）</h3>
<p>结合Webpack/Vite等工具实现高级工作流：</p>
<div class="code-block">
<span class="code-comment">// webpack.config.js 配置示例</span><br>
module.exports = {<br>
module: {<br>
rules: [<br>
{<br>
test: /.less$/,<br>
use: [<br>
'style-loader',<br>
'css-loader',<br>
'less-loader' <span class="code-comment">// 处理Less语法</span><br>
]<br>
}<br>
]<br>
}<br>
};
</div>
<p>在JS中直接导入Less模块：</p>
<div class="code-block">
<span class="code-comment">// app.js</span><br>
import './styles.less';
</div>
</div>
<div class="section">
<h3>关键注意事项</h3>
<ul>
<li><span class="highlight">浏览器兼容性</span>：Less不直接支持IE8及以下版本</li>
<li><span class="highlight">路径问题</span>：确保文件路径正确，尤其使用@import时</li>
<li><span class="highlight">Source Maps</span>：开发时启用source map便于调试（通过lessc --source-map）</li>
<li><span class="highlight">性能优化</span>：生产环境务必使用预编译CSS + 压缩（lessc --clean-css）</li>
</ul>
</div>
<div class="reference">
<p>参考来源：</p>
<ul>
<li>Less.js官方文档（https://lesscss.org/）</li>
<li>MDN Web文档 - CSS预处理指南</li>
<li>Webpack官方Loader配置文档</li>
<li>Google Web开发者性能优化指南</li>
</ul>
</div>
<div class="section">
<p>通过合理运用Less的特性，开发者能构建出更灵活、更易维护的样式系统，建议始终遵循<b>开发阶段用Less源码调试 → 生产环境使用预编译CSS</b>的工作流，兼顾效率与性能。</p>
</div>
</div>
