CSS预编译语言Less的用法总结

好的，我来给您总结一下Less预编译语言的用法：

1. 变量：使用“@”符号定义变量，如@color: #333;

2. 嵌套规则：可以在一个规则块内嵌套另一个规则块，如：

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px;
      }
    }
  }
}

3. 混合（Mixin）：可以将一组样式封装成一个Mixin，以后可以直接调用该Mixin来应用这组样式，如：

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

使用时只需要调用即可：

#box {
  .border-radius(5px);
}

4. 函数（Function）：Less提供了一些内置函数，如rgb()、rgba()、hue()、saturation()等，还可以自定义函数。

5. 运算：可以进行加、减、乘、除、取模等运算（但要注意单位），如：

@width: 100px;
#box {
  width: @width + 50;
  height: @width * 2;
  left: (@width % 3) + 10;
}

6. 导入（Import）：可以将多个Less文件合并成一个CSS文件，如：

@import "reset.less";
@import "common.less";

以上就是Less预编译语言的用法总结，希望能对您有所帮助。