Less 程序化使用-JavaScript中文网-JavaScript教程资源分享门户

引入变量

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

变量定义

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

@main-color: #4D90FE;

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

使用变量

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

body {
    color: @main-color;
}

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

变量的作用域

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

-- -------------------- ---- -------
------------ ----

------ -
    ----------- -----
    ------ -----------
-

------- -
    ------ ----------- -- -------- ---------- ----- --
-

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

混合

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

定义混合

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

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

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

调用混合

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

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

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

混合参数

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

-- -------------------- ---- -------
----------------------- ---- -
    -------------- --------
-

----- -
    ---------------------
-

----- -
    -----------------
-

在这个例子中，.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 关键字来创建自定义函数。例如：

-- -------------------- ---- -------
--------- ------------------- -------- -
    --- ------------
    --- --------------
    --- -------------

    ------- -------- - ---------
    ------- -------- - ---------
    ------- -------- - ---------

    ----------- ----------- ------- --------

    ------ -----------
-

------- -
    ------ -------------------- -----
-

在这个例子中，我们定义了一个 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 关键字来实现。例如：

-- -------------------- ---- -------
------- ----
------ -----

----------------------- ---- ------- -- ---- --- ------ - ----- -
    -------------- --------
-

---- -
    --------------------
-

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

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