LESS 预处理器

1. LESS 概述

1.1 核心特性

LESS（Leaner Style Sheets）作为CSS预处理语言，提供以下核心能力：

• 动态变量系统 ：使用@符号定义可复用值
• 嵌套规则：直观反映DOM层级结构
• 参数化混合：支持带默认值的可配置样式块
• 运算能力：处理数值、颜色和单位的计算
• 函数库：提供颜色操作、数学计算等实用功能
• 模块化组织 ：通过@import实现文件拆分

1.2 环境配置

安装方式

npm install -g less

编译命令

# 基础编译
lessc styles.less styles.css

# 压缩输出
lessc styles.less styles.min.css --clean-css

# 实时监听
less-watch-compiler less css

构建工具集成

webpack配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

2. 核心功能详解

2.1 变量系统

基础定义

// 颜色变量
@primary: #428bca;
@danger: #d9534f;

// 尺寸变量
@base-padding: 15px;
@border-radius: 4px;

// 字体变量
@font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;

动态应用

// 选择器插值
@component: alert;
.@{component} {
  color: @primary;
}

// 属性名插值
@property: color;
.widget {
  @{property}: @primary;
  background-@{property}: #fff;
}

2.2 嵌套规则

标准嵌套

.navbar {
  background-color: @navbar-bg;
  
  .nav-item {
    padding: @base-padding;
    
    > a {
      color: @navbar-text;
    }
  }
}

父选择器引用

.btn {
  &-primary {
    background: @primary;
  }
  
  &:hover {
    opacity: 0.9;
  }
  
  .disabled & {
    opacity: 0.5;
  }
}

2.3 混合功能

基础混合

.border-radius(@radius: 4px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
}

.box-shadow(@x: 0, @y: 1px, @blur: 3px, @color: rgba(0,0,0,.1)) {
  box-shadow: @arguments;
}

条件混合

.text-contrast(@color) when (lightness(@color) > 50% {
  color: #000;
}
.text-contrast(@color) when (lightness(@color) <= 50% {
  color: #fff;
}

2.4 运算系统

数值计算

@base: 16px;
@spacing: @base * 1.5;
@container-width: 100% / 3;

颜色操作

@primary: #428bca;
@primary-dark: darken(@primary, 10%);
@primary-light: lighten(@primary, 15%);

3. 高级特性

3.1 映射功能

#colors() {
  primary: #428bca;
  secondary: #5cb85c;
}

.button {
  background: #colors[primary];
}

3.2 循环结构

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

3.3 导入指令

// 基础导入
@import "variables";

// 条件导入
@import (optional) "theme";

// 内联CSS
@import (inline) "external.css";

4. 工程化实践

4.1 推荐目录结构

styles/
├── core/
│   ├── variables.less
│   ├── mixins.less
│   └── reset.less
├── components/
│   ├── buttons.less
│   └── modals.less
├── layouts/
│   ├── header.less
│   └── footer.less
└── main.less

4.2 响应式方案

// 断点定义
@breakpoints: {
  mobile: 576px;
  tablet: 768px;
  desktop: 992px;
};

// 媒体查询混合
.respond(@device, @content) {
  @media (min-width: @breakpoints[@@device]) {
    @content();
  }
}

// 使用示例
.container {
  .respond(tablet, {
    max-width: 720px;
  });
}

5. 性能优化

1. 控制嵌套深度：建议不超过4层
2. 合理使用混合：避免生成冗余代码
3. 模块化拆分：按需加载样式模块
4. 生产环境压缩：使用clean-css选项
5. 避免全局污染：合理使用命名空间

6. 与现代CSS的配合

6.1 CSS变量集成

:root {
  --primary: @primary;
  --text-color: @text-color;
}

.element {
  color: var(--text-color);
  border: 1px solid var(--primary);
}

6.2 原生CSS嵌套

/* 输出保留嵌套结构 */
.card {
  &__header {
    font-size: 1.2em;
  }
  
  @media (min-width: 768px) {
    width: 50%;
  }
}

7. 最佳实践示例

7.1 主题系统实现

// 主题定义
.theme(light) {
  @bg-color: #fff;
  @text-color: #333;
}

.theme(dark) {
  @bg-color: #222;
  @text-color: #eee;
}

// 应用主题
.apply-theme(@theme) {
  .theme(@theme);
  
  body {
    background: @bg-color;
    color: @text-color;
  }
}

7.2 工具类生成

// 间距工具
.generate-spacing(@prefix, @property) {
  .loop(@i) when (@i <= 5) {
    @value: @i * 0.25rem;
    .@{prefix}-@{i} {
      @{property}: @value;
    }
    .loop(@i + 1);
  }
  .loop(1);
}

.generate-spacing(m, margin);
.generate-spacing(p, padding);

附录：资源参考

1. 官方文档
2. LESS编译工具
3. LESS插件集合