Less 快速入门：变量/混合/函数/循环

Introduction

Less 是一款轻量级、易上手的 CSS 预处理器，语法与 CSS 非常接近，学习曲线平缓。它同样提供变量、混合（Mixin）、函数和循环等特性，编译速度极快，特别适合快速原型开发和中小型项目。本指南从零讲解 Less 的核心语法，配以实战代码，帮助你快速上手 Less。

基础语法

1. 变量

@primary: #3498db;
@secondary: #2ecc71;
@font-stack: 'Helvetica Neue', Arial, sans-serif;
@spacing: 16px;
.header { color: @primary; font-family: @font-stack; padding: @spacing; }
@name: card;
.@{name} { background: #fff; border-radius: 8px; }
@prop: color;
.div-@{prop} { @{prop}: @primary; }
@base: '../images';
background: url('@{base}/bg.png');

2. 混合（Mixin）

.flex-center { display: flex; justify-content: center; align-items: center; }
.box { .flex-center(); }
.border-radius(@radius: 4px) { border-radius: @radius; }
.card { .border-radius(8px); }
.text-contrast(@color) when (lightness(@color) < 50%) { color: #fff; }
.text-contrast(@color) when (lightness(@color) >= 50%) { color: #000; }

3. 嵌套

nav {
  background: #2c3e50;
  ul { list-style: none; display: flex; }
  li { display: inline-block; &:hover a { text-decoration: underline; } }
  a { color: #fff; text-decoration: none; }
}

4. 内置函数

@base: #3498db;
@light: lighten(@base, 20%);
@dark: darken(@base, 20%);
@spin: spin(@base, 30deg);
@mix: mix(@base, #e74c3c, 50%);
round(3.7); ceil(2.2); floor(2.9); percentage(0.5);

5. 循环和递归

.generate-columns(@n, @i: 1) when (@i <= @n) {
  .col-@{i} { width: (@i * 100% / @n); }
  .generate-columns(@n, (@i + 1));
}
.grid { .generate-columns(12); }

完整代码示例

@primary: #3498db;
@secondary: #2ecc71;
@warning: #f39c12;
@danger: #e74c3c;
@text-color: #2c3e50;
@text-light: #7f8c8d;
@bg-color: #ecf0f1;
@font-stack: 'Helvetica Neue', Arial, sans-serif;
@spacing: 16px;
@border-radius: 8px;
@shadow: 0 2px 8px rgba(0,0,0,0.1);
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.card() { background: #fff; border-radius: @border-radius; box-shadow: @shadow; padding: @spacing; }
.text-ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.respond-to(@breakpoint; @content) { @media (min-width: @breakpoint) { @content(); } }
{ box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: @font-stack; color: @text-color; background: @bg-color; line-height: 1.6; }

.header { .flex-between(); background: @text-color; color: #fff; padding: @spacing; &__logo { font-size: 24px; font-weight: bold; } &__nav ul { list-style: none; display: flex; gap: @spacing; } &__nav a { color: #fff; text-decoration: none; transition: opacity 0.2s; &:hover { opacity: 0.7; } } }
.card-grid { display: grid; grid-template-columns: 1fr; gap: @spacing; .respond-to(768px, { grid-template-columns: repeat(2, 1fr); }); .respond-to(1024px, { grid-template-columns: repeat(3, 1fr); }); }
.card { .card(); &__title { font-size: 18px; color: @primary; margin-bottom: @spacing / 2; .text-ellipsis(); } &__body { font-size: 14px; color: @text-light; margin-bottom: @spacing; line-height: 1.5; } &__footer { display: flex; justify-content: flex-end; gap: @spacing / 2; } &__tag { display: inline-block; background: @primary; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; } &--featured { border-top: 4px solid @secondary; } }
.btn { display: inline-block; padding: 10px 20px; border-radius: @border-radius; text-decoration: none; cursor: pointer; border: none; font-size: 14px; transition: background 0.2s, transform 0.2s; &--primary { background: @primary; color: #fff; &:hover { background: darken(@primary, 10%); transform: translateY(-2px); } } &--success { background: @secondary; color: #fff; &:hover { background: darken(@secondary, 10%); } } &--danger { background: @danger; color: #fff; &:hover { background: darken(@danger, 10%); } } }
.alert { padding: @spacing; border-radius: @border-radius; margin-bottom: @spacing / 2; border-left: 4px solid; &-success { background: lighten(@secondary, 35%); border-color: @secondary; color: darken(@secondary, 20%); } &-warning { background: lighten(@warning, 35%); border-color: @warning; color: darken(@warning, 20%); } &-danger { background: lighten(@danger, 35%); border-color: @danger; color: darken(@danger, 20%); } }
.generate-grid(@n, @i: 1) when (@i <= @n) { .col-@{i} { width: (@i * 100% / @n); padding: @spacing / 2; } .generate-grid(@n, (@i + 1)); }
.grid-system { .generate-grid(13); }
.badge { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; &--blue { background: @primary; color: #fff; } &--green { background: @secondary; color: #fff; } &--orange { background: @warning; color: #fff; } }

常见问题

• Less 和 Sass 哪个更好？ 两者功能相近。Less 语法更接近 CSS，适合初学者；Sass 功能更丰富，适合大型项目。
• Less 的变量插值在选择器中如何使用？ 使用 @{var} 语法，例如 .@{name}-box 会编译为 .card-box。
• Less 如何实现循环？ Less 没有原生 for 循环，使用递归混合（Guarded Recursive Mixin）实现。
• Less 编译命令是什么？ lessc style.less style.css 编译，lessc --watch style.less style.css 实时编译。

延伸阅读

• Less 官方中文网
• Less 内置函数文档
• Less 教程推荐