常见的CSS预处理器之Less初体验

2019-06-17 本文已影响20人前白

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

简单来说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。

CSS预处理器的技术现在已经很成熟了，而且也出现了各种不同的 CSS 预处理器语言，但是呢不可能一一列出，面面俱到，这篇文章呢，主要是介绍一下比较常见的CSS预处理器语言之一之 Less初体验。

Less

Alexis Sellier与2009年设计
LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript替代了。
Less是一门CSS预处理语言，扩充了 css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易于维护，方便制作主题。

关于Less的基本使用，我们需要从嵌套、混合、变量、函数以及引入这几个方面来一一认识。

1 Less的安装使用和编译：

引用Less，全局安装

    npm install less -g

新建一个index.html文件和main.less，在index.html 中引入main.css，然后输入下面语句自动编译成main.css

    lessc main.less main.css

2 Less 的基本语法

嵌套

在 css 中父子元素的写法通常如下：

    .container {
        padding: 0;
    }
    .container .header {
        background-color: red;
    }

通过Less 写法如下，父子嵌套关系一目了然。也就是下面的代码编译就成了上面的css语法。

    .container {
        padding: 0;
        .header {
            background-color: red;
        }
    }

伪类

伪类的写法，在 css 中写法如下：

    #header :after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }

在less 引入可以用一个符号 & 代替主类 #header；&就代表了上一层的类名。

    #header {
      &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

变量

也就是说定义一个公共的变量不用多次重复编写相同的代码；比如将三个div的背景颜色改成蓝色，我们只需要如下所示：

   @background:blue;

less就是js的写法来写css
使用@符号定义变量
@变量名看成是一个字符串
变量可以作为样式属性值：background-color：@color；
也可以作为类名，我们需要把{ }包起来：如下代码.@classname 表示的就是 .main。

      .@{classname}{
          background-color：@color;
      }
      @classname:main;
      @color:red;

函数

使用 $ lessc func.less 进行转译 func.css 文件

    .border-radius(@radius) {
      -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
              border-radius: @radius;
    }
    #header {
      .border-radius(4px);
    }
    .button {
      .border-radius(6px);
    }
    
    转化成了css如下:
    #header {
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .button {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
    }

函数的参数允许设置默认值

    .border-radius(@radius: 10px) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
    }
    #header{
        .border-radius();
    }
    .button{
        .border-radius();
    }
    
    编译css后的代码为：
    #header {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }
    .button {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

函数有多个参数时用分号隔开，调用时就是通过变量名称，而不是位置

      .mixin(@radius:10px;@color：green;) {
       -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        border-radius: @radius;
        color:@color;
      }
      #header{
          .mixin(@color:green);
      }
      .button{
          .mixin(@color:green);
      }
      
      编译成css为：
      #header{
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          color:green;
      }
      .button{
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          color:green;
      }

Less 内置函数（自己本身存在的函数）

escape
percentage（百分比）

      .mixin(@radius:10px;@color：green;) {
       -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        border-radius: @radius;
        color:@color;
        width:percentage(.5);
      }
      #header{
       .mixin(@color:green);
      }
      .button{
       .mixin(@color:green);
      }
编译成css为：
#header{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:green;
    width:50%;
}
.button{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:green;
    width:50%;
}

convert（单位的转换）

混合

抽取公共类，例如下面的css代码可以用less这样编写

      在css中的代码：
      #header a {
          color: #111;
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      #header span {
          height: 16px;
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      #header p {
          color: red;
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      .borde_style {
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }

在less中我们可以定义一个公共的样式名border-style，然后编译出来的css就是上面的css代码：

      .borde_style {
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      #header a {
          color: #111;
          .borde_style;
      }
      #header span {
          height: 16px;
          .borde_style;
      }
      #header p {
          color: red;
          .borde_style();
      }

3 Less的引入

比如新建一个one.less，@import ‘./main.less ’ ；然后编译一下，我们会发现编译出来的。one.css里面就包含了main.less里面的样式内容。

4 Less的优势与劣势

优点：

开发速度提升
代码优化效率提高（对开发者而言）
代码更通俗易懂（对开发者而言）
代码更干净，优美
维护简单便捷
功能更多更强

缺点：

舍弃用户体验来提高开发的效率
舍弃网页打开速度换取开发效率提升
需要多一个编译器来重新编译一次CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢