Less 扩展

Less 是一种 CSS 预处理器，它扩展了 CSS 的功能，使得代码更加简洁、易于维护。本章将介绍如何使用 Less 的各种扩展特性来提升开发效率。

变量

变量允许你在 Less 文件中定义可重用的值。这些值可以是颜色、尺寸或其他任何类型的 CSS 属性值。通过使用变量，你可以轻松地在整个项目中统一和更新样式。

定义变量

@primary-color: #4d90fe;
@secondary-color: #ff6b6b;

使用变量

body {
    background-color: @primary-color;
}

h1 {
    color: @secondary-color;
}

计算与变量结合

变量不仅可以存储静态值，还可以用于计算。

// www.javascriptcn.com code example
@base-size: 16px;

.container {
    font-size: @base-size;
}

.header {
    font-size: (@base-size * 1.5);
}

混合

混合允许你将一组 CSS 属性封装到一个名为“混合”的实体中，然后在需要的地方调用这个混合。这可以减少重复代码并提高代码的可读性。

定义混合

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

.shadow(@x: 0, @y: 0, @blur: 3px, @color: #000) {
    -webkit-box-shadow: @x @y @blur @color;
       -moz-box-shadow: @x @y @blur @color;
            box-shadow: @x @y @blur @color;
}

调用混合

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

函数

Less 提供了一些内置函数，允许你对变量进行数学运算、字符串操作等。这些函数可以帮助你更灵活地处理数据。

数学运算

@width: 100px;
@height: @width * 2; // 结果为 200px

字符串操作

@text: "Hello World";
@result: concat("Welcome to ", @text); // 结果为 "Welcome to Hello World"

嵌套规则

嵌套规则让你可以在一个选择器内部定义另一个选择器，从而创建更结构化的 CSS。

// www.javascriptcn.com code example
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { display: inline-block; }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

名称空间

名称空间允许你组织和封装你的 Less 代码，避免命名冲突，并使代码更具模块化。

// www.javascriptcn.com code example
.namespace {
    .inner {
        color: red;
    }
}

// 在其他地方调用
.namespace > .inner {
    color: blue;
}

运算符

Less 支持标准的数学运算符（+、-、*、/），可以用来创建动态的 CSS 属性值。

@base-width: 20px;
@multiplier: 3;

.width {
    width: @base-width * @multiplier; // 结果为 60px
}

条件语句

条件语句允许根据特定条件执行不同的 CSS 规则，这在响应式设计中特别有用。

@is-mobile: true;

.container {
    width: 100%;
    if(@is-mobile = true, & {
        max-width: 480px;
    });
}

循环

循环可以让你重复生成一系列相似的 CSS 规则，这有助于减少冗余代码。

数字循环

// www.javascriptcn.com code example
.size(@index) when (@index > 0) {
    .size((@index - 1));
    .box:nth-child(@{index}) {
        width: 100px * @index;
        height: 100px * @index;
    }
}

.size(5);

列表循环

// www.javascriptcn.com code example
@colors: red, green, blue;

.generate-colors() {
    .loop-colors(@i: length(@colors)) when (@i > 0) {
        .loop-colors(@i - 1);
        .color-@{i} {
            color: extract(@colors, @i);
        }
    }
}

.generate-colors();

通过本章的学习，你应该能够掌握 Less 中的这些扩展特性，并将其应用于实际的前端开发项目中。这些功能将帮助你写出更高效、更易维护的 CSS 代码。