Less基本语法

Less基本语法

编写的Less文件需要通过编译器转换为常规css后，才能被浏览器识别和应用。

1. 变量 (Variables)：在 Less 中，可以定义变量并将其用于整个样式表中，减少重复输入和提高一致性。

@primary-color: #007bff;
body {
  background-color: @primary-color;
}
a {
  color: @primary-color;
}

2. 嵌套规则 (Nested Rules)：类似于 Sass，Less 允许你将选择器嵌套在其他选择器内，模仿 HTML 结构。

.header {
  color: black;
  .logo {
    width: 100px;
  }
  .nav {
    list-style: none;
    li {
      display: inline-block;
    }
  }
}

3. 混合 (Mixins) ：混合允许定义一个可以重复使用的样式块，并且可以接受参数。

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.button {
  .border-radius();
  // 或者传入参数
  .border-radius(10px);
}

4. 函数 (Functions) ：Less 提供了多种内置函数以及自定义函数的功能，用于处理颜色、数值和其他类型的值。

@base-color: #333;
.body-text() {
  color: darken(@base-color, 10%);
}
p {
  .body-text();
}

5. 运算符与表达式： Less 支持加减乘除和颜色运算，可以动态计算样式值。

@width: 500px;
@container-width: (@width - 20px);
.container {
  width: @container-width;
}