如何在 Atom 中使用 LESS 进行开发

LESS 是一种动态样式语言，可以将样式代码更加简洁易读。它不仅提供了类似编程语言的变量，混合（mixin），函数等特性，还能通过使用嵌套规则来组织CSS的结构，更加清晰的展现样式层级关系。在前端开发中，使用 LESS 可以大幅度提高编写CSS样式的效率。在这篇文章中, 我们将介绍如何在 Atom 中使用 LESS 进行开发。

安装 LESS

在开始使用 LESS 前，需要先安装 Less 编辑器。在 Atom 中，可以通过以下步骤安装 LESS：

1. 打开 Atom 编辑器，并点击菜单栏中的“File” -> “Settings” -> “Install”。
2. 在搜索框中输入“less”，并选中 “less-autocompile”。点击右边的“Install”按钮，等待插件安装完成。
3. 安装完成后，点击“File”->”Settings” ->”Packages” ->”less-autocompile” ->”Settings” 里的选项卡中的"Compile on Save”选项。

这样，每次保存 LESS 文件时，就会自动编译成CSS文件。

LESS 的基础语法

在 Atom 中，通过新建文件并将文件后缀名改为“.less”便可开始 LESS 的编写。以下是 LESS 的一些基础语法：

• 变量：使用 @ 符号定义变量，变量的定义遵循 CSS 属性名的规范。

@bg-color: #333;
body {
    background-color: @bg-color;
}

• 混合（mixin）: 使用 .mixin 定义一个混合器，可以将多个相似的样式组成一个混合器。通过 @include 引用混合器实现代码的复用。

// javascriptcn.com 代码示例
.mystyle() {
    font-size: 14px;
    color: red;
}
.mytitle {
    .mystyle();
    font-weight: bold;
    text-align: center;
}

• 嵌套：使用 LESS 的嵌套语法，在规则中嵌套其他规则。可以使代码更加清晰易读。

// javascriptcn.com 代码示例
.container {
    width: 960px;
    margin: 0 auto;
    .header {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .nav {
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                float: left;
                margin-right: 20px;
            }
        }
    }
}

• 运算：使用算术运算符进行计算。

@width: 300px;
.block {
    width: @width / 2;
    height: @width * 2;
}

LESS 高级特性

除了基础语法外，LESS 还提供了一些高级特性，如函数、作用域、条件语句等。

• 函数：使用 LESS 的函数可以实现更加复杂的计算。

// javascriptcn.com 代码示例
@pi: 3.141592653589793;
@radius: 50px;
@font-size: 14px;
.circle (@radius) {
    width: @radius * 2;
    height: @radius * 2;
    border-radius: @radius;
    font-size: @font-size;
    line-height: @radius * 2;
    text-align: center;
}
.area (@radius) {
    width: @radius * 2;
    height: @radius * 2;
    font-size: @font-size;
    color: #FFF;
    text-align: center;
    background-color: rgba(0, 0, 0, .8);
    line-height: @radius * 2;
    span {
        font-size: @font-size * 3;
    }
    span::after {
        content: "、";
        opacity: .5;
    }
    span:nth-of-type(13)::after {
        content: "";
    }
}
.circle-wrap {
    display: inline-block;
    .circle(@radius);
}
.area-wrap {
    display: inline-block;
    margin-left: 20px;
    .area(@radius);
}

• 作用域：可以在函数内定义局部变量，并且可以通过 !important 关键字防止变量被外部干扰。

// javascriptcn.com 代码示例
@color: #333;

.my-box {
    color: @color;  // 会根据作用域定义的 @color 变量的值渲染颜色
    .inner-box {
        @color: #fff !important;  // 定义局部变量，覆盖外部样式表中同名变量
        background-color: @color; // 使用局部定义的 @color 变量渲染背景颜色
    }
}

• 条件语句：根据条件进行样式渲染，使得样式的渲染更加精细化。

// javascriptcn.com 代码示例
@is-round: true;

.button {
    font-size: 14px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 3px;

    .round() when (@is-round = true) {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    .round();
}

总结

通过安装 LESS 编辑器，并了解 LESS 的基础语法和高级特性，我们可以快速编写出更加简洁、易读、高效、底层的前端样式代码。最后，我们可以通过在 Atom 中安装 LESS 插件并设置自动编译，更加方便的使用 LESS 进行前端开发，提高效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654f13c27d4982a6eb819e59