Less 程序化使用

引入变量

在 Less 中，变量是一种非常强大的工具，可以用来存储和重用值。这不仅提高了代码的可读性，还简化了维护工作。变量可以在整个 Less 文件或导入的文件中使用。

变量定义

变量通过@符号来定义，后面跟着一个变量名，再接着是变量值。例如：

@main-color: #4D90FE;

在这个例子中，我们定义了一个名为 @main-color 的变量，它的值为 #4D90FE。

使用变量

在 Less 文件中，变量可以通过它们的名字来引用。当编译 Less 文件时，这些变量会被替换为其对应的值。例如：

body {
    color: @main-color;
}

在上面的例子中，color 属性将会被编译成 color: #4D90FE;。

变量的作用域

Less 支持局部作用域的变量。如果在某个块（如一个选择器内部）定义了一个变量，那么这个变量就只在这个块内有效。例如：

// www.javascriptcn.com code example
@global-var: red;

.block {
    @local-var: blue;
    color: @local-var;
}

.block2 {
    color: @local-var; /* 这里会报错，因为 @local-var 是局部变量 */
}

在这个例子中，@local-var 只在 .block 选择器内部有效。如果你试图在其他地方访问它，就会产生错误。

混合

混合是 Less 中的另一个重要概念，它允许你将一组 CSS 规则封装在一个名为“混合”的结构中，并在需要的时候调用它。这有助于减少重复代码，提高代码的复用性。

定义混合

你可以通过 . 来定义一个混合，后跟一个名称。例如：

.mixing() {
    border-radius: 5px;
    padding: 10px;
}

在这个例子中，我们定义了一个名为 .mixing 的混合，它包含了两个 CSS 规则。

调用混合

你可以通过在选择器之后加上 () 并在括号内指定参数的方式来调用混合。例如：

.button {
    .mixing();
    background-color: #4CAF50;
}

在这个例子中，.button 类会继承 .mixing 混合中的所有规则，并添加自己的背景颜色。

混合参数

混合也可以接受参数，就像函数一样。你可以定义默认值，也可以在调用时传递具体的值。例如：

// www.javascriptcn.com code example
.border-radius(@radius: 5px) {
    border-radius: @radius;
}

.box1 {
    .border-radius(10px);
}

.box2 {
    .border-radius();
}

在这个例子中，.box1 将具有 10px 的圆角，而 .box2 将使用默认的 5px 圆角。

函数

Less 提供了一些内置的函数，这些函数可以用来操作颜色、字符串和其他数据类型。此外，你还可以创建自定义函数来执行特定的任务。

内置函数示例

• 颜色函数：改变颜色的亮度、饱和度等。

  @base-color: #ffdd55;
  .color-change {
      color: lighten(@base-color, 10%);
      background-color: darken(@base-color, 10%);
  }

• 字符串函数：处理文本内容。

  @text: "Hello World";
  .string-change {
      font-size: percentage(0.8);
      content: replace(@text, "World", "Less");
  }

自定义函数

你可以通过 @function 关键字来创建自定义函数。例如：

// www.javascriptcn.com code example
@function scale-color(@color, @factor) {
    @r: red(@color);
    @g: green(@color);
    @b: blue(@color);

    @new-r: round(@r * @factor);
    @new-g: round(@g * @factor);
    @new-b: round(@b * @factor);

    @new-color: rgb(@new-r, @new-g, @new-b);

    return @new-color;
}

.result {
    color: scale-color(#ff0000, 0.5);
}

在这个例子中，我们定义了一个 scale-color 函数，该函数接收一个颜色和一个因子作为输入，并返回一个新的颜色，其 RGB 值按比例缩小。

嵌套

嵌套是指在 Less 中将选择器嵌套在另一个选择器中，以表示它们之间的父子关系。这使得样式表更加直观和易于管理。

基本嵌套

当你在一个选择器内部定义另一个选择器时，这两个选择器之间就会形成一种父子关系。例如：

.nav {
    a {
        text-decoration: none;
        &:hover {
            color: red;
        }
    }
}

在这个例子中，.nav a 会选择所有位于 .nav 元素内的 <a> 标签，而 .nav a:hover 则会选择这些链接在鼠标悬停时的状态。

嵌套属性

除了选择器之外，Less 还支持对属性进行嵌套。例如：

.border {
    border-top: 1px solid black;
    border-right: 2px solid black;
    border-bottom: 3px solid black;
    border-left: 4px solid black;
}

可以用更简洁的方式表示为：

.border {
    border: {
        top: 1px solid black;
        right: 2px solid black;
        bottom: 3px solid black;
        left: 4px solid black;
    }
}

这样不仅减少了重复代码，也使代码更具可读性。

运算符

Less 支持多种运算符，包括加法（+）、减法（-）、乘法（*）、除法（/）以及取模（%）。这些运算符可以用于数值、颜色以及变量之间。

数值运算

你可以直接在 Less 文件中使用运算符来进行数值计算。例如：

@base-width: 100px;
@base-height: 50px;

.container {
    width: @base-width + 50px;
    height: @base-height - 10px;
}

在这个例子中，.container 的宽度将是 150px，高度将是 40px。

颜色运算

颜色也可以参与运算，但需要注意的是，颜色运算通常涉及的是 RGB 值。例如：

@color: #123456;

.box {
    background-color: @color + #111111;
}

在这个例子中，.box 的背景颜色将会是一个新的颜色，其 RGB 值为原始颜色的 RGB 值加上 #111111。

变量与运算符结合

你还可以将变量与运算符结合起来使用，以动态生成不同的样式。例如：

@base-size: 16px;
@ratio: 1.5;

.font-size {
    font-size: @base-size * @ratio;
}

在这个例子中，.font-size 的字体大小将会是 24px（即 16px * 1.5）。

条件语句

条件语句允许你在 Less 中根据某些条件来决定是否应用某些样式。这使得 Less 更加灵活，能够处理更多复杂的场景。

if 语句

Less 提供了一个简单的 if 语句，用于基于条件表达式的真假来选择不同的值。例如：

@size: 10px;
@is-mobile: true;

.screen-size {
    font-size: if(@is-mobile, @size, @size * 2);
}

在这个例子中，如果 @is-mobile 为真，则 .screen-size 的字体大小为 10px；否则，字体大小为 20px。

when 语句

Less 还支持更复杂的条件结构，通过 when 关键字来实现。例如：

// www.javascriptcn.com code example
@color: red;
@size: 10px;

.border-radius(@radius) when (@color == red) and (@size < 20px) {
    border-radius: @radius;
}

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

在这个例子中，.box 类的边框半径只有在 @color 为红色且 @size 小于 20px 时才会生效。

通过以上介绍，我们可以看到 Less 在程序化方面的强大功能，包括变量、混合、函数、嵌套、运算符以及条件语句等，这些功能极大地提升了 CSS 的可维护性和扩展性。