快速掌握 LESS 技术-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它扩展了 CSS 语言，让开发者能够更快捷、更高效地编写 CSS 代码。通过 LESS，开发者可以使用类似编程语言的结构，包括变量、函数、运算符等等，来编写 CSS 样式。本文将介绍 LESS 的基本语法、用法和一些实用技巧，帮助你快速掌握 LESS 技术。

LESS 的基本语法

LESS 的基本语法与 CSS 类似，但是它引入了一些新的概念和符号。

变量

在 LESS 中定义变量的语法为：

@variableName: value;

一旦定义了变量，就可以在其它地方使用它：

@textColor: #333;

body {
  color: @textColor;
}

嵌套

在 LESS 中，可以像这样嵌套样式规则：

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

    -- -
      -------- -------------
    -
  -
-展开代码

这样可以使代码更加清晰易读，同时也可以减少选择器的复杂度。

混合

在 LESS 中，可以使用混合（Mixin）来定义一组样式规则，然后在其它地方使用它们：

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

---------------- -
  --------------------
-展开代码

上面的例子中，定义了一个名为 .border-radius 的混合，它接受一个参数 @radius，然后在 .rounded-corners 中使用了这个混合。

参数化混合

LESS 还支持参数化混合，可以在调用混合时传入参数：

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

div {
  .box-shadow(2px, 2px);
}

在上面的例子中，.box-shadow 接受 4 个参数，然后在 div 中调用了这个混合并传入了 2 个参数。如果混合定义了默认值，那么可以不必传入参数。如果只需要传递参数列表中的某些值，那么可以使用命名参数。

运算

LESS 支持加减乘除等基本运算：

@baseFontSize: 16px;

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

在 LESS 中还可以使用函数来完成更复杂的运算：

@baseFontSize: 16px;

h1 {
  font-size: darken(@baseFontSize, 10%);
}

上面的例子中，使用了 LESS 内置的 darken 函数来将 @baseFontSize 的值变暗了 10%。

LESS 的用法

LESS 可以通过以下方式使用：

在 HTML 中引入 LESS 文件

<head>
  <link rel="stylesheet/less" type="text/css" href="styles.less">
  <script src="less.js"></script>
</head>

在 <head> 中使用 <link> 标签引入 LESS 文件，并在文件后面引入 LESS 编译器，这样浏览器就可以通过 JavaScript 把 LESS 编译为 CSS。

在 Node.js 中使用 LESS

可以使用 Node.js 来编译 LESS 文件：

$ npm install less -g
$ lessc styles.less styles.css

这个命令会编译 styles.less 并将结果保存在 styles.css 中。

在 Gulp 中使用 LESS

在 Gulp 中可以使用以下插件来编译 LESS 文件：

$ npm install gulp-less --save-dev

然后在 gulpfile.js 中使用如下代码：

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function () {
  return gulp.src('styles.less')
    .pipe(less())
    .pipe(gulp.dest('dist'));
});

LESS 的进阶用法

除了基本语法外，LESS 还有一些进阶用法，可以更加高效地编写 CSS 代码。

命名空间

LESS 支持命名空间，可以将变量、混合等相关的定义放到一个命名空间中：

.newsletter {
  @textColor: #333;

  .heading {
    color: @textColor;
  }
}

覆盖变量

在 LESS 中，变量的值可以被覆盖：

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

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

--------- -
  -------------- --------
-展开代码

在上面的例子中，定义了一个变量 @primaryColor，然后在 .button 中使用了这个变量。.warning 为 .button 的一个子类，覆盖了父级的 @primaryColor，会导致 .button 中使用的颜色值改变。

导入文件

使用 @import 可以导入 LESS 文件：

@import "reset.css";
@import "variables.less";

这里假设我们的文件名为 style.less，reset.css 和 variables.less 分别是需要导入的文件名，期望这些文件位于 style.less 的同级目录下。如果是相对路径，可以像这样：

@import "bootstrap/variables.less";

在上面的代码中，导入了 bootstrap 文件夹中的 variables.less 文件。

小结

通过本文的介绍，你应该已经掌握了 LESS 的基本语法和用法，以及一些实用技巧。LESS 是一种非常实用的工具，可以让开发者更加高效地编写 CSS，同时也让代码变得更加易于维护和扩展。如果你一直在使用原始的 CSS，不妨试试使用 LESS，相信你会爱上它的。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6794c48a504e4ea9bd9683cf

快速掌握 LESS 技术