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

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的优点与劣势

优势：

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

缺点：

• 功能上比Sass弱，好比对象、循环和判断
• 生态环境略逊于Sass(2006)
• 须要多一个编译器来从新编译一次CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢