使用Less对CSS进行预处理

Veröffentlicht am

什么是less？

在Less中文网中介绍Less是一门CSS预处理语言，它拓展了CSS语言，增加了变量，Mixin，函数等特性，让CSS更容易维护和拓展。

如何安装和使用Less？

打开node.js，输入命令：$ npm install -g less即可安装Less。
如果想要将写好的Less转化为CSS，就要使用$ lessc style.less style.css

Less的用法。

  • 变量：
1
2
3
4
5
@color:#332233;
#header{
@color
}

转化后：

1
2
3
#header{
color:#332233
}

Less可以定义一个变量，定义这个变量之后，就可以在Less中使用了。

  • 混合：
1
2
3
4
5
6
7
8
9
10
11
12
rounder-corners(@radius:5px){
  border-radius:@radius;
  -webkit-border-radius:@radius;
  -moz-border-radius:@radiuss;
}
#header{
  .rounded-corners;
}
#footer{
  .rounded-corners(10px);
}

转化后：

1
2
3
4
5
6
7
8
9
10
#header{
   border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
};
#footer{
   border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
}

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单的实现class B继承class A中的特性。我们可以带参数的调用，就像使用函数一样。

  • 嵌套
1
2
3
4
5
6
7
8
9
10
#header{
  h1{
    color:#fff;
    font-size:16px;
  }
  h2{
  color:#000;
  font-size:17px;
  }
}

转化后：

1
2
3
4
5
6
7
8
#header h1{
  color:#fff;
  font-size:16px;
}
#header h2{
  color:#000;
  font-size:17px;
}

嵌套规则可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度上减少了代码量，并且代码看起来很清晰。
使用嵌套中的元素的伪元素的话，不能使用‘：’，而要使用‘&’
使用嵌套中的元素的直接子元素的话，要在进行一次嵌套

  • 函数&运算
1
2
3
4
5
6
7
8
9
10
11
12
13
@the-border:1px;
@base-color:#111;
@red: #842210;
#header{
  color:@base-color *3;
  border-left:@the-border;
  border-right:@the-border *2;
}
#footer{
  color:@base-color + #003300;
  border-color:desaturate(@red ,10%);
}

转化后：

1
2
3
4
5
6
7
8
9
10
#header{
  color:#333;
  border-left:1px;
  border-right:2px;
}
#footer{
  color:#114411;
  border-color:#7d2717;
}

Less提供了加减乘除操作，我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系运算，Less中的函数一一映射了JavaSciprt的代码。如果你愿意的话可以操作属性值。

如何引入Less？

我们可以将Less分成很多个功能文件，然后将这些功能文件整合到一个Less文件中，当我们需要应用这些样式的时候，只要引入一个整合的Less文件即可。
整合引入的时候，是将一个功能文件名前加@impotant！