LESS基础用法详解-EW帮帮网

LESS 基础用法详解

1. 变量（Variables）

LESS 允许你为常用的值（如颜色、字体大小等）定义变量，便于统一管理和修改。

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

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

注意： 变量名以 @ 开头。

2. 嵌套（Nesting）

LESS 支持样式的嵌套，类似于 HTML 结构，增强了代码的可读性。

nav {
  ul {
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      a {
        color: @primary-color;
      }
    }
  }
}

3. 混合（Mixins）

混合（Mixin）允许你定义一组样式，然后在其他选择器中复用这些样式。

3.1 基本混合

.rounded-corner {
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

.button {
  .rounded-corner;
  background: @primary-color;
}

3.2 带参数的混合

.box-shadow(@x: 0, @y: 0, @blur: 5px, @color: #333) {
  box-shadow: @x @y @blur @color;
}

.panel {
  .box-shadow(2px, 2px, 10px, #666);
}

4. 运算（Operations）

LESS 支持对数值、颜色等进行加减乘除等运算。

@base: 10px;

.box {
  width: @base * 2;   // 20px
  height: @base + 5;  // 15px
  margin: @base / 2;  // 5px
}

颜色也可以运算：

@color: #888;

.header {
  color: @color + #111; // #999999
}

5. 函数（Functions）

LESS 内置了许多实用的函数，如颜色操作、字符串处理、数学运算等。

5.1 颜色函数

@base: #f04615;

.light {
  color: lighten(@base, 20%); // 变亮
}
.dark {
  color: darken(@base, 20%);  // 变暗
}
.alpha {
  color: fade(@base, 50%);    // 设置透明度
}

5.2 数学函数

@width: 100px;

.box {
  width: ceil(@width / 3);   // 向上取整
  height: floor(@width / 3); // 向下取整
  margin: round(@width / 3); // 四舍五入
}

6. 作用域与变量覆盖

LESS 变量有作用域，嵌套作用域内可以覆盖外层变量。

@color: red;

.box {
  @color: blue;
  color: @color; // blue
}

.text {
  color: @color; // red
}

7. 导入（Import）

LESS 支持 @import 导入其他 LESS 文件，便于模块化开发。

@import "reset.less";
@import (less) "theme.less";

注意： LESS 会自动识别 .less 后缀。

8. 选择器插值（Selector Interpolation）

可以通过变量动态生成选择器。

@name: banner;

.@{name}-title {
  font-size: 24px;
}

编译后：

.banner-title {
  font-size: 24px;
}

9. 继承（Extend）

通过 :extend 关键字实现选择器继承。

.button {
  padding: 10px;
  color: white;
}

.primary-btn:extend(.button) {
  background: @primary-color;
}

10. 注释

LESS 支持单行（//）和多行（/* ... */）注释。

// 这是单行注释
/* 这是多行注释 */

11. 条件语句（Guards）

LESS 支持在混合中使用条件判断。

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

.text {
  .set-color(#ddd);
}

12. 循环（Loops）

LESS 通过递归混合实现循环。

.loop(@i) when (@i > 0) {
  .item-@{i} { width: (10px * @i); }
  .loop(@i - 1);
}
.loop(5);

LESS基础用法详解