LESS 完全教程

第一章：LESS 基础

1.1 安装和配置

LESS 的安装和基本配置。

练习 1.1：安装和配置示例

展示 LESS 的安装和配置过程。

安装和配置示例

# 使用 npm 安装
npm install -g less

# 使用 yarn 安装
yarn global add less

# 编译单个文件
lessc styles.less styles.css

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

# 监听文件变化
less-watch-compiler less css

1.2 变量

LESS 的变量使用。

练习 1.2：变量示例

展示变量的使用。

变量示例

// 定义变量
@primary-color: #333;
@secondary-color: #666;
@font-stack: Helvetica, sans-serif;

// 使用变量
body {
  font: 100% @font-stack;
  color: @primary-color;
}

// 嵌套使用
.container {
  background-color: @secondary-color;
  
  .header {
    color: @primary-color;
  }
}

第二章：嵌套和混合

2.1 嵌套规则

LESS 的嵌套规则。

练习 2.1：嵌套规则示例

展示嵌套规则的使用。

嵌套规则示例

// 嵌套规则
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

// 父选择器 &
.button {
  &-primary {
    background-color: blue;
  }
  
  &-secondary {
    background-color: gray;
  }
  
  &:hover {
    opacity: 0.8;
  }
}

2.2 混合器

LESS 的混合器使用。

练习 2.2：混合器示例

展示混合器的使用。

混合器示例

// 定义混合器
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  border-radius: @radius;
}

// 使用混合器
.box {
  .border-radius(10px);
}

// 带默认值的混合器
.box-shadow(@x: 0, @y: 0, @blur: 0, @color: #000) {
  -webkit-box-shadow: @x @y @blur @color;
  -moz-box-shadow: @x @y @blur @color;
  box-shadow: @x @y @blur @color;
}

.card {
  .box-shadow(2px, 2px, 5px, rgba(0,0,0,0.3));
}

第三章：运算和函数

3.1 运算

LESS 的运算功能。

练习 3.1：运算示例

展示运算的使用。

运算示例

// 基本运算
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

// 颜色运算
@color: #888 / 4;
@background: @color + #111;

// 单位运算
@width: 100px;
@height: @width * 2;

.element {
  width: @width;
  height: @height;
  color: @color;
  background: @background;
}

3.2 函数

LESS 的函数使用。

练习 3.2：函数示例

展示函数的使用。

函数示例

// 颜色函数
@color: #428bca;

.element {
  color: lighten(@color, 20%);
  background-color: darken(@color, 10%);
  border-color: fade(@color, 50%);
}

// 数学函数
@width: 100px;
@height: 200px;

.box {
  width: percentage(@width / @height);
  height: round(@height / 2);
}

// 字符串函数
@str: "Hello, World!";

.text {
  content: replace(@str, "World", "LESS");
}

第四章：命名空间和导入

4.1 命名空间

LESS 的命名空间。

练习 4.1：命名空间示例

展示命名空间的使用。

命名空间示例

// 定义命名空间
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

// 使用命名空间
#header a {
  color: orange;
  #bundle > .button;
}

4.2 导入

LESS 的导入功能。

练习 4.2：导入示例

展示导入的使用。

导入示例

// 导入文件
@import "variables.less";
@import "mixins.less";
@import "components.less";

// 导入选项
@import (reference) "library.less";
@import (inline) "not-less-compatible.css";
@import (less) "less-compatible.css";
@import (css) "css-compatible.css";
@import (once) "library.less";
@import (multiple) "library.less";

第五章：最佳实践

5.1 项目结构

LESS 项目的最佳结构。

练习 5.1：项目结构示例

展示项目结构的最佳实践。

项目结构示例

styles/
├── variables/
│   ├── _colors.less
│   ├── _typography.less
│   └── _spacing.less
├── mixins/
│   ├── _grid.less
│   ├── _buttons.less
│   └── _forms.less
├── components/
│   ├── _buttons.less
│   ├── _cards.less
│   └── _forms.less
├── layout/
│   ├── _header.less
│   ├── _footer.less
│   └── _grid.less
├── pages/
│   ├── _home.less
│   └── _about.less
└── main.less

5.2 性能优化

LESS 的性能优化技巧。

练习 5.2：性能优化示例

展示性能优化的最佳实践。

性能优化示例

// 使用变量存储重复值
@primary-color: #333;
@secondary-color: #666;

// 使用混合器减少代码重复
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 使用命名空间组织代码
#utilities {
  .clearfix() {
    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }
  
  .text-truncate() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// 使用条件语句优化代码
.responsive(@breakpoint) {
  & when (@breakpoint = mobile) {
    @media (max-width: 600px) { @content(); }
  }
  & when (@breakpoint = tablet) {
    @media (max-width: 900px) { @content(); }
  }
  & when (@breakpoint = desktop) {
    @media (min-width: 901px) { @content(); }
  }
}