Less 是一种CSS预处理器，它通过引入一些编程语言的特性，使得CSS更加灵活和易于维护。以下是Less的基本用法和一些常见的功能：

1. 变量定义：
// 定义变量
@primary-color: #3498db;

// 使用变量
body {
  background-color: @primary-color;
}

2. 嵌套规则：
// 使用嵌套
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline; }

  a {
    text-decoration: none;

    &:hover {
      border-bottom: 1px solid #fff;
    }
  }
}

3. 混合（Mixin）：
// 定义混合
.border-radius(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

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

4. 导入文件：
// 导入其他Less文件
@import "reset";
@import "variables";

body {
  font-family: 'Helvetica Neue', sans-serif;
}

5. 运算：
// 运算
@base: 5px;
@multiplier: 10;

#header {
  width: @base * @multiplier;
}

6. 颜色函数：
// 颜色函数
@color: #3498db;

.lighter-color {
  color: lighten(@color, 20%);
}

7. 循环：
// 循环
.loop(@counter) when (@counter > 0) {
  .item-@{counter} {
    width: 20px * @counter;
  }
  .loop(@counter - 1);
}

.loop(5);

8. 条件语句：
// 条件语句
@width: 10px;

#element {
  width: @width;
  
  & when (@width > 5) {
    height: 20px;
  }
}

9. 命名空间（Namespace）：
// 命名空间
#header {
  .navigation {
    color: #333;
  }
}

10. 生成源地图：

在编译Less文件时，可以选择生成CSS源地图，以便在浏览器开发者工具中更容易调试。
lessc styles.less styles.css --source-map

以上是一些 Less 的基本用法和功能。Less 的语法非常灵活，可以根据项目的需求进行扩展和定制。请注意，使用 Less 需要将其编译为标准的 CSS 文件，这可以通过使用 Less 编译器或集成到构建工具中来完成。


转载请注明出处：http://www.zyzy.cn/article/detail/4310/Less