LESS 语言基础教程

LESS 是一种 CSS 预处理器语言，它可以让我们更加方便地编写 CSS 样式，并且具有更强大的功能。在本篇文章中，我们将从入门到精通 LESS 语言，带你领略它的魅力。

LESS 的基本语法

LESS 的语法与 CSS 语法类似，但是它扩展了 CSS 的功能，使得我们可以使用变量、嵌套规则、运算、混合等功能。下面是 LESS 的基本语法：

变量

使用 @ 符号定义变量，可以在整个样式表中使用这个变量。例如：

@link-color: #428bca;

a {
  color: @link-color;
}

嵌套规则

可以在一个选择器内嵌套另一个选择器，这样可以使得样式表更加清晰易懂。例如：

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;

    a {
      text-decoration: none;
    }
  }
}

运算

可以使用加、减、乘、除等运算符来计算属性值。例如：

@base-font-size: 16px;

h1 {
  font-size: @base-font-size * 2;
}

混合

可以定义一组样式，然后在需要的地方引用这个样式。这样可以使得样式表更加模块化。例如：

// javascriptcn.com 代码示例
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.button {
  .border-radius;
  background-color: #428bca;
  color: #fff;
}

LESS 的安装和使用

LESS 可以通过 Node.js 的包管理器 npm 来安装。在命令行中输入以下命令即可：

npm install -g less

安装完成后，就可以使用 LESS 了。下面是一个简单的示例：

@color: #428bca;

h1 {
  color: @color;
}

将这个文件保存为 style.less，然后使用以下命令将其编译为 CSS 文件：

lessc style.less style.css

这样就可以得到一个名为 style.css 的文件，其中包含了 LESS 编译后的 CSS 样式。

LESS 的高级用法

除了基本语法外，LESS 还有很多高级用法，例如：

混合的参数

混合可以带有参数，这样可以使得混合更加灵活。例如：

// javascriptcn.com 代码示例
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

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

嵌套属性

可以在一个属性内嵌套另一个属性，这样可以使得样式表更加清晰易懂。例如：

.box {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

条件语句

可以使用条件语句来判断某个条件是否成立，然后执行相应的操作。例如：

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

.text-color() when (lightness(@color) >= 50%) {
  color: #000;
}
.text-color() when (lightness(@color) < 50%) {
  color: #fff;
}

h1 {
  .text-color();
}

循环语句

可以使用循环语句来重复执行某个操作，例如：

// javascriptcn.com 代码示例
@base-color: #428bca;

.loop(@i) when (@i > 0) {
  .color-@{i} {
    color: lighten(@base-color, @i * 5%);
  }
  .loop(@i - 1);
}

.loop(5);

这样就会生成一组颜色，从浅到深，分别为 color-1 到 color-5。

总结

LESS 是一种非常强大的 CSS 预处理器语言，它可以使得我们更加方便地编写 CSS 样式，并且具有更强大的功能。通过本文的介绍，相信大家已经掌握了 LESS 的基本语法和高级用法，可以在项目中灵活运用。

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