css预编辑器less的简单使用

CSS预处理器

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

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

到目前为止，最常用的CSS预处理器有Sass、Less和Stylus。

less的介绍

less 是一款比较流行的预处理 CSS，支持变量、混合、函数、嵌套、循环等特点。

less的使用

安装依赖

nom install --save-dev less less-loader

在main.js中引入

import less from 'less'

Vue.use(less)

注释

less的注释有两种

第一种：模版注视

// 模板注释 这里的注释转换成CSS后将会删除

因为 less 要转换为 css才能在浏览器中使用。转换成 css 之后，这种注释会被删除（毕竟 css 不识别这种注释）。

第二种：css注释语法

/* CSS 注释语法 转换为CSS后让然保留 */

总结：如果在less中写注释，我们推荐写第一种注释。除非是类似于版权等内容，就采用第二种注释。

定义变量

我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。

在less文件中，定义一个变量，并使用

@变量名: 变量值;        //格式

@bgColor: #f5f5f5;      //格式举例

// 引用变量
body{
    background-color: @bgColor;
}

我们将上面的less文件编译成css文件后，会自动生成如下代码：

body{
    background-color: #f5f5f5;
}

嵌套

在css中经常用到的子代选择器，代码如下“：

.container {
   1024px;
}

.container > .row {
  height: 100%;
}

.container > .row a {
  color: #f40;
}

.container > .row a:hover {
  color: #f50;
}

用 less 的嵌套语法来写这段代码，就比较简洁清晰：

.container {
   @containerWidth;

  > .row {
    height: 100%;
    a {
      color: #f40;

      &:hover {
        color: #f50;
      }

    }
  }

Mixin

Mixin的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便。

在less文件中定义一个类：

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

其中，@radius为参数，5px为默认值，可以空。

在less文件中使用上面定义的这个类：

#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(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);
  }

less的内置函数

percentage（百分比）

.button {
  percentage(.5);
}

编译之后的css为：

.button {
  50%;
}

混合

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

css代码如下：

      在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文件中，我们可以定义一个公共的样式名borde_style，代码如下：

.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();
}

文件引入 Import

在开发阶段，我们可以将不同的样式放到多个文件中，最后通过@import 的方式合并。意思就是，当出现多个 less 文件时，怎么引用它们。

定义一个被引用的less文件，名为_button1.less:

.btn{
  line-height: 100px;
  color: @btnColor;
}

在另一个less文件中引用：

@btnColor: red;

@import url(`_button1.less:');    //这里的路径写的是相对路径

body{
   1024px;
}

编译之后的代码如下：

.btn {
    line-height: 100px;
    color: red;
}

body {
     1024px;
}

总结：less的优势和劣势

优势

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

劣势

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