// Less 示例
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, @base); }
}关于 Less
名字的含义
Less 是 "Leaner Style Sheets" 的缩写，意为"更精简的样式表"。这个名字准确地反映了它的设计理念：通过简化CSS的编写过程，减少重复代码，提高开发效率。
起源与发展
Less 由 Alexis Sellier 于2009年创建，最初是作为一个Ruby库开发的。后来，它被重写为JavaScript实现，这使得它可以在浏览器中直接运行。
如今，Less已经成为最受欢迎的CSS预处理器之一，拥有庞大的社区支持和丰富的生态系统。
Less 特性动画展示
变量 (Variables)
@primary-color: #61dafb;
@border-radius: 8px;
.button {
background-color: @primary-color;
border-radius: @border-radius;
}定义一次，多处使用，轻松维护一致的设计系统
混合 (Mixins)
.box-shadow(@x: 0, @y: 0, @blur: 10px) {
box-shadow: @x @y @blur rgba(0,0,0,0.2);
}
.card {
.box-shadow(0, 4px);
}封装可重用的样式，带参数的函数式CSS
嵌套 (Nesting)
.nav {
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
a {
text-decoration: none;
}
}
}反映HTML结构的嵌套语法，减少重复选择器
运算 (Operations)
@base-font: 16px;
@container-width: 1000px;
.title {
font-size: @base-font * 1.5;
}
.container {
width: @container-width - 200px;
}直接在样式中进行数学运算，简化响应式设计
Less 的 优点 与 缺点
主要优点
- 语法与CSS非常接近，学习曲线平缓，CSS开发者可以快速上手
- 支持在浏览器中直接编译，无需复杂的构建工具即可使用
- 提供变量、混合、嵌套等功能，显著减少CSS代码量
- 丰富的函数库，支持颜色操作、数学运算等
- 良好的社区支持和丰富的学习资源
- 与主流构建工具(Webpack, Gulp等)无缝集成
主要缺点
- 相比Sass，功能相对较少，如缺少高级循环和条件语句
- 浏览器端编译会增加页面加载时间，影响性能
- 错误提示不如其他预处理器详细，调试相对困难
- 社区规模虽然庞大，但相比Sass略小
- 某些高级功能需要额外插件支持
- 变量作用域处理不如其他预处理器灵活
CSS预处理器使用率对比
免费 资源 与 使用方法
免费资源与工具
免费获取与使用方法
方法一：通过npm安装
Less可以通过npm包管理器安装，这是最常用的方法：
# 安装Less编译器
npm install -g less
# 编译Less文件
lessc styles.less styles.css安装完成后，你可以使用lessc命令将.less文件编译为普通的.css文件。
方法二：浏览器中直接使用
无需安装，直接在浏览器中使用Less：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4/dist/less.min.js"></script>注意：这种方法仅适合开发环境，生产环境应使用预编译的CSS文件以提高性能。
方法三：与构建工具集成
在现代前端项目中，通常与Webpack等构建工具集成：
# 安装必要的加载器
npm install less less-loader --save-dev
# 在webpack.config.js中配置
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
}基本使用示例
Less文件 (styles.less)
// 定义变量
@primary: #61dafb;
@spacing: 16px;
// 混合
.border-radius(@radius: 4px) {
border-radius: @radius;
-webkit-border-radius: @radius;
}
// 样式规则
.button {
background: @primary;
padding: @spacing;
.border-radius(8px);
&:hover {
background: darken(@primary, 10%);
}
}编译后的CSS
.button {
background: #61dafb;
padding: 16px;
border-radius: 8px;
-webkit-border-radius: 8px;
}
.button:hover {
background: #4aa7c8;
}社区 真实评论
来自开发者社区的真实评价 (50+)