优雅的使用 Less

前言

我们在写 CSS 的时候，可能会遇到许许多多的问题。现如今我们可以使用 CSS预处理器 来提高我们的开发效率及开发的舒适度，本文就带大家来聊聊比较流行的 Less 的特点以及使用方法。

一、简介

1. CSS预处理器

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。—— MDN Web Docs

2. Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。—— Less 中文网

二、开始使用

1. 在 Node.js 环境中使用

1.1 手动编译

全局安装 Less：

npm i -g less
# or
yarn global add less

# 查看版本，有版本则安装成功
lessc -v
# 成功示例：lessc 4.1.2 (Less Compiler) [JavaScript]

全局安装成功后就可以使用命令行将 .less 文件编译为 .css 文件啦！我们来试一试，新建一个 demo.less 的文件。

@color-theme: #0094ff;

.demo {
    background-color: @color-theme;
}

打开命令行，切换到该文件的目录下，然后输入 lessc demo.less demo.css ，得到编译后的文件 demo.css ：

.demo {
  background-color: #0094ff;
}

1.2 在 webpack 中使用

基本步骤：

1. 安装 less 以及 less-loader
2. 配置 webpack
3. 如果是 .vue 文件要在 style 标签上增加属性 lang="less"

安装：

npm i less less-loader --save-dev
# or
yarn add less less-loader --dev

配置 webpack ：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

此处附上 webpack 配置文档传送门：less-loader

如果是 Vue.js 的项目则需要增加 style 标签的 lang 属性：

<style lang="less" scoped>
// ...
</style>

2. 在浏览器环境中使用

在 .html 文件的 head 标签内进行引入：

<head>
    <!-- 引入 less -->
    <link rel="stylesheet/less" type="text/css" href="./index.less" />
    <!-- 引入 less.js 核心库 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
</head>

三、用法

1. 变量

1.1 定义及使用

我们可以使用 @ 符号开头定义变量，注意要在结尾处加上分号。

@width: 10px;
@height: @width + 10px;

#header {
    width: @width;
    height: @height;
}

编译后代码：

#header {
    width: 10px;
    height: 20px;
}

实际开发中，我们可以根据不同的类型来命名不同的变量，这样不但便于理解，而且易于维护。

/* ============ 距离 ============ */
@space-large: 36px;
@space-middle: 24px;
@space-small: 12px;
// ...

/* ============ 颜色 ============ */
// 颜色可以说是一个项目中定义最多的变量了,可以单独拆分出一个 less 文件进行维护
@color-theme: #0094ff;
@title-color: #090909;
// ...

1.2 转义

在定义变量时，可以使用任何字符串，在使用时该字符串保持原样输出。

// 定义变量为一个字符串
@min-1024: ~"(min-width: 1024px)";

.element {

    // 在媒体查询处使用该变量
    @media @min-1024 {
        color: skyblue;
    }
}

编译后代码：

@media (min-width: 1024px) {
  .element {
    color: skyblue;
  }
}

1.3 作用域

类似于 JavaScript 中的块级作用域， Less 中同样存在变量的作用域。即有限从最近的作用域下读取变量，换句话说，如果有两个同名变量，那么谁和使用行近谁生效。

// 定义一个同名变量 @color-title
.demo {
    @color-title: pink;

    .item {
        @color-title: skyblue;

        .title {
            color: @color-title; // skyblue
        }
    }
}

编译后代码：

.demo .item .title {
  color: skyblue;
}

1.4 映射

从版本 3.5 起，我们可以定义一组映射值，以提高 Less 代码的可复用性。就像 JavaScript 中的 Object 的键值对一样，可以有多个，互不干扰。

// before
// 定义多个变量
@color-theme: #0094ff;
@color-success: #93dd00;

.status {
    color: @color-theme;

    &.success {
        color: @color-success;
    }
}

// after
// 定义一个映射
#colors() {
    theme: #0094ff;
    success: #93dd00;
}

.status {
    color: #colors[theme];

    &.success {
        color: #colors[success];
    }
}

编译后代码：

.status {
  color: #0094ff;
}

.status.success {
  color: #93dd00;
}

2. 混合

混合即 Mixin ，是一种复用代码的手段。可以将一个类名下的代码块轻易的放入另一个类名之中。我们先来看一下基本用法：

// 一个朴实无华的类名
.bordered {
    border-top: solid 1px #000;
}

#menu a {
    color: #000;
    // 将类名 bordered 中的代码混入,不要忘记结尾的分号
    .bordered(); // 或者写成.bordered;
}

编译后代码：

.bordered {
  border-top: solid 1px #000;
}

#menu a {
  color: #000;
  border-top: solid 1px #000;
}

在实际开发中，我们可以在全局公共样式文件中定义公共类名，在其他组件的私有样式文件中引入并使用。

// src/styles/index.less
// 全局样式文件

// 一些公共类名...
.mg-0-auto {
    margin: 0 auto !important;
}

.text-center {
    text-align: center !important;
}

// src/pages/Demo/index.less
// 某组件私有样式

@import url(@/styles/index.less); // 引入全局公共样式

// 一个自定义类名
.demo {
    background-color: #fff;
    // 使用混合,不要忘记结尾的分号
    .mg-0-auto();
    .text-center();
}

3. 嵌套

3.1 使用嵌套

Less 允许把具有层级关系的类名/选择器进行嵌套使用，注意需要用花括号进行包裹。

.demo {
    margin: 0 auto;

    .box {
        display: flex;

        .item {
            color: #000;
        }
    }
}

编译后代码：

.demo {
  margin: 0 auto;
}

.demo .box {
  display: flex;
}

.demo .box .item {
  color: #000;
}

3.2 符号 &

使用 & 符号代替父元素。

// before
.box {
    display: flex;

    .item {
        color: #000;
    }

    .item.active {
        color: skyblue;
    }
}

// after
.box {
    display: flex;

    .item {
        color: #000;

        // "&" 代替了父级类名 ".item"
        &.active {
            color: skyblue;
        }
    }
}

3.3 @规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

.component {
    width: 300px;

    @media (min-width: 768px) {
        width: 600px;

        @media (min-resolution: 192dpi) {
            background-color: skyblue;
        }
    }

    @media (min-width: 1280px) {
        width: 800px;
    }
}

编译后代码：

.component {
  width: 300px;
}

@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}

@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-color: skyblue;
  }
}

@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

美中不足的是每一个类名都会单独编译出一个@media，多个相同条件的媒体查询不会进行合并。

4. 运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 10%;
@filler: @base * 2; // 结果是 20%
@other: @base + @filler; // 结果是 30%

5. 函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。下面列举一些常用的函数，完整版请移步官网的《Less 函数手册》。

• 逻辑函数
  • if 根据表达式返回不同结果
  • boolean 存储一个布尔值，用于 if 判断
• 字符串函数
  • escape 将URL 编码应用于输入字符串中的特殊字符
  • replace 替换字符串中的文本
• 数学函数
  • ceil 向上舍入到下一个最高整数
  • floor 向下舍入到下一个最小整数
  • percentage 将浮点数转换为百分比字符串
  • sqrt 计算一个数的平方根。保持单位不变
  • abs 计算一个数的绝对值。保持单位不变
  • min 返回一个或多个值中的最小值
  • max 返回一个或多个值中的最大值

6. 注释

我们可以在 less 中使用单行注释和多行注释，其中但行注释不会被编译到 CSS 中去。

// 普通注释,不会被编译到 CSS 中

/*
 多行注释,会被编译到 CSS 中
*/

编译后代码：

/*
 多行注释,会被编译到 CSS 中
*/

7. 导入

我们可以在一个 less 文件中引入其他的 less 文件，引入后就可以使用被引入文件的变量和映射。一般在一个 less 文件的最顶部进行引入。

// 可以这样引入
@import url(a.less);

// 或者这样引入
@import 'b.less';

// 当然也可以引入 CSS 文件
@import 'style.css';

参考资料

• Less 中文网
• webpack
• MDN Web Docs
• 学习Less-看这篇就够了