less

LESS（Leaner Style Sheets）是一种动态样式语言，它扩展了 CSS 的功能，添加了变量、嵌套规则、混合（Mixins）、函数等特性，使 CSS 更具维护性、可扩展性和灵活性。以下是 LESS 的一些主要语法规则：

1. 变量

变量允许你在样式表中存储一个值，并在多个地方重复使用它。使用@符号来定义变量。

less

@primary-color: #007bff;
@font-size: 16px;

body {
  color: @primary-color;
  font-size: @font-size;
}

2. 嵌套规则

LESS 允许你在选择器中嵌套其他选择器，这使得代码结构更清晰，更易于理解。

less

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

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

3. 混合（Mixins）

混合是一种将一组属性从一个规则集包含到另一个规则集的方式。可以将其看作是可重用的代码块。

less

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

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

4. 运算

LESS 支持基本的数学运算，如加、减、乘、除。可以对数值、颜色等进行运算。

less

@base-font-size: 16px;
@heading-font-size: @base-font-size * 1.5;

h1 {
  font-size: @heading-font-size;
}

5. 函数

LESS 提供了一些内置函数，用于处理颜色、字符串、数学等操作。

less

@base-color: #f04615;
@lighter-color: lighten(@base-color, 10%);

body {
  background-color: @lighter-color;
}

6. 导入

可以使用@import指令导入其他 LESS 文件，将多个文件合并成一个 CSS 文件。

less

@import "variables.less";
@import "mixins.less";

// 使用导入文件中定义的变量和混合
body {
  color: @primary-color;
  .border-radius(5px);
}

7. 条件判断（Guard Expressions）

在混合中可以使用条件判断来根据不同的条件应用不同的样式。

less

.mixin(@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin(@a) {
  color: @a;
}

.class {
  .mixin(#ddd);
}

以上就是 LESS 的一些主要语法规则，通过这些特性，你可以更高效地编写和管理 CSS 代码。