less 基础语法

LESS 是一种动态样式语言，扩展了 CSS 的能力。它允许使用变量、嵌套、混合、函数等，使得 CSS 更加可维护和灵活。以下是一些 LESS 语法的基础和示例：

1. 变量

LESS 允许你定义变量来存储值，例如颜色、字体大小等。

@primary-color: #4CAF50;
@font-size: 16px;

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

2. 嵌套

LESS 允许你嵌套 CSS 选择器，使得样式层级关系更加清晰。

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

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: @primary-color;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

3. 混合

混合（mixins）是可以重用的样式块，可以带参数。

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

#header {
  .border-radius(10px);
}

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

4. 运算

LESS 支持基本的算术运算，例如加法、减法、乘法和除法。

@base: 5%;
@width: @base * 2;
@height: @base + 10%;

#banner {
  width: @width; // 10%
  height: @height; // 15%
}

5. 函数

LESS 提供了一些内置函数，可以用来操作颜色、字符串、数值等。

@base-color: #4D926F;

.lighten(@color, @amount) {
  color: lighten(@color, @amount);
}

#header {
  .lighten(@base-color, 10%);
}

6. 导入

LESS 文件可以相互导入，使得样式更加模块化。

// variables.less
@primary-color: #4CAF50;
@font-size: 16px;

// styles.less
@import "variables";

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

7. 高级用法：条件和循环

LESS 也支持条件语句和循环，用于复杂的样式逻辑。

条件语句

.set-background(@color) when (@color = red) {
  background: #ff0000;
}
.set-background(@color) when (@color = blue) {
  background: #0000ff;
}

#header {
  .set-background(red);
}

循环

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

.generate-columns(4); // Generates .col-1, .col-2, .col-3, .col-4

示例项目结构

// variables.less
@primary-color: #4CAF50;
@secondary-color: #FF5722;
@font-size-base: 16px;

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

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

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

  .container {
    .border-radius(10px);
    background: @secondary-color;
  }
}

通过这些基础和示例，你可以使用 LESS 来编写更加灵活和可维护的 CSS 代码。LESS 的功能和语法极大地扩展了传统 CSS，使得编写和管理样式变得更加高效。