写在开头

为什么要有CSS预处理器

CSS作为前端开发必不可少的一个环节，然而很多开发者的却并不喜欢写CSS代码。这是因为它并不像其他编程语言一样，有自己的变量，常量等；它只是一行行单纯的属性描述，书写起来很需要耐心，而且代码难以维护。于是有人开始就想着能不能给CSS加入一些编程元素，让CSS能像其他编程语言一样可以做一些预定的处理，于是就有了“CSS预处理器”

什么是CSS预处理器

CSS预处理器定义了一种新的语言，目的是为了用一种专门的编程语言，为CSS增加一些编程的特性，而不是作为解释型语言。这样，我们可以在CSS中使用变量，简单的逻辑程序，函数等编程特性，让我们的CSS更容易书写和维护，可读性也更强。

目前，CSS预处理器技术已经很成熟，出现了很多不同的CSS预处理器语言，其中最受欢迎的就是Sass，Less和Stylus了。今天重点讲讲Less的常见用法

本文参考Less中文文档

Less的介绍

Less是一款比较流行预处理CSS，支持变量，混合，嵌套，运算，函数等功能

官网
中文文档

常见用法

定义变量

我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可。这样书写方便并且便于维护。

1
2
3
4
5
@bgColor: #fff;
body {
    background-color: @bgColor;
}

编译为

1
2
3
body {
    background-color: #fff;
}

我们还可以用变量表示选择器名，绝对路径等

1
2
3
4
5
6
7
8
@my-selector: banner;
@images: '../images'
.@{my-selector} {
    color: #000;
    background-image: url('@{images}/bg-img.png');
    /* ... */
}

编译为

1
2
3
4
.banner {
    color: #000;
    background-color: url('../images/bg-img.png');
}

这样，当选择器发生改变时我们只需要更改变量定义即可，当绝对路径的url很长时用变量书写也是很不错的选择

混合

混合的作用就是将重复的代码放到一个类中，我们每次使用时只需要引用类名即可

  • 定义一个类
    1
    2
    3
    4
    5
    .borderRadius(@radius: 5px) {
        border-radius: @radius;
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
    }

上面代码中这个类定义了一个参数，默认值是5px

  • 使用这个类
    1
    2
    3
    4
    5
    6
    .content: {
        .borderRadius;
    }
    .footer: {
        .borderRadius(10px);
    }

嵌套

写CSS最烦的应该就是选择器很长很长，比如说：

1
2
3
4
5
6
7
8
9
10
11
12
.header {
    width: 80vw;
}
.header>.title {
    font-size: 20px;
}
.header>.title a {
    color: #fff;
}
.header>.title a:hover {
    color: lightblue;
}

上面的代码相对实际开发来说嵌套的不是很多，但是依旧很繁琐，如果用less，就比较简洁了

1
2
3
4
5
6
7
8
9
10
11
12
.header {
    width: 80vw;
    >.title {
        font-size: 20px;
        a {
            color: #fff;
            &:hover {
                color: lightblue;
            }
        }
    }
}

书写起来也比较快

运算

less还提供我们常用的加减乘除的运算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 能转换单位并且有意义的
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
// 不能转换单位的
@incompatible-units: 2 + 5px - 3cm; // result is 4px
// 带变量的运算
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
// 乘法和除法不能转换，在大多数情况下都是没有意义的，比如长度乘长度得到面积(一块区域)，而CSS不支持区域，所以得到的依旧是一维的单位
@base: 2cm * 3mm; // result is 6cm
// 颜色的数学运算
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

  • calc()特例
    为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
1
2
@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

Escaping

转译：我们可以使用任意字符串作为属性或者变量值

1
2
3
4
5
6
@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

函数

Less内置了很多函数，用于转换颜色、处理字符串、算数运算等，具体参考函数手册

这里讲一下 lighten 和 darken 这两个内置函数

1
2
3
4
body {
  background-color: lighten(#000, 10%);   // 让黑色变亮 10%
  color: darken(#fff, 10%);               // 让白色变暗 10%
}

注释

less文件中有两种注释

  • 第一种

    1
    // 这种注释转换成css后将会删除

  • 第二章

    1
    /* CSS注释语法，转换成css后仍然保留 */

Import

在开发过程中，我们常常将不同的样式放到多个文件中，最后通过@import的方式导入。

写在最后

最终浏览器认识的还只能是css代码，所以我们要把less文件转译成css文件，我用的最多的是使用webpack。

使用方法