初识less

 

1 less 安装使用

安装

sudo npm install node-less

使用

mkdir less

cd /less

lessc demo1.less > test1.css

lessc -x demo1.less > test1.css (压缩)

2 为什么使用less

面向对象思想很重要的是继承和封装，我们也可以使用这种思想考虑css编写。

页面上的css从页面功能上来说，一般分为2类：结构性和装饰性的。

结构性:比如表格，列表，布局，定位。装饰性:比如字体，块内容，背景，边框，方框。

我们在根据设计图构建html结构时，考虑的css首先是结构性，比如布局，定位。我们一般会把整个页面分成几个部分，从设计角度来说就是模块。大模块的布局定位搞定之后，再到深入到模块里面。这个分层分块的思路其实就是封装的概念，每个模块看成一个黒盒子，先不管，把几个大的黑子拍整齐后，在深入大盒子里面。盒子里面也可以这么处理。

但是盒子和盒子之间可能有些相同部分，比如背景，比如字体，比如定位。如果把相同的部分拿出来，就有继承概念了。

使用模块化的方式构建html和css时，会使整个页面结构清晰，样式条理，方便后续的维护，但是有时候我们会遇到这样的情况：

(1) div1包含div2、div3,div2宽度固定，div3宽度=div1宽度-div2的宽度。设计样式时，我们针对每个div设计了样式，我们需要手动计算div3的宽度。如果设计有变更div2的宽度变了，或者div1的宽度变了，于是我们不得不重新计算div3的宽度，于是我们的工作量来了。

(2)  div1包含div2、div3，div2、div3的结构性样式不同，但是有部分修饰性样式相同，比如字体和背景相同，于是们设计了一个类font-Bg加在div2和div3的class上，可以这样的话，你不得不面对这样一种风险，当div2和div3的字体和背景不同时，你要修改div2和div3的class，新增样式。为了减少这种修改，div2和div3各自设计一个class，但是他们之间确实有相同的样式，所以这个css的设计比较纠结，要么维护困难，要么费事费力。

遇到类似以上这些问题，我们有没有好的办法解决呢？

3 怎么使用less

less可以较好的解决上面遇到问题。

less主要的特性：变量及运算，混入（mixin），嵌套。

针对上述中第一个问题，我们使用变量就可以解决。

@div1Width:500;
@div2Width:200px;

.div1cls
{
  width:@div1Width;
}

.div2cls
{
  width:@div2Width;
}

.div3cls
{
  width:(@div1Width)-(@div2Width);
}

如果有div1和div2的width有变动，只需要修改@div1Width或@div2Width就可以了。

编译后：

.div1cls {
  width: 500;
}
.div2cls {
  width: 200px;
}
.div3cls {
  width: 300px;
}

针对第二个问题，可以使用混入的方法：

.font-bg
{
  font-size:12px;
  background-image:url('demo.png');
}

.div2cls
{
   float:left;
  .font-bg
   
}

.div3cls
{
   float:right;
  .font-bg
   
}

如果有变动只需要修改css文件，编译就可以，而不需要修改html文件。这个继承的意思。公共样式都可以抽出来，需要的话，直接混入就可以。和extjs上apply类似。

编译后：

.font-bg {
  font-size: 12px;
  background-image: url('demo.png');
}
.div2cls {
  float: left;
  font-size: 12px;
  background-image: url('demo.png');
}
.div3cls {
  float: right;
  font-size: 12px;
  background-image: url('demo.png');
}

还有一种比较复杂的应用就是嵌套，考虑这样的场景：

div1包含div2、div3，div1背景图片是image1.png, div2背景变为白色，字体变成12px，div3背景为黄色，字体变成8px。当鼠标移动到div1上时，div1背景图片变成image2.png,div2背景变成红色，字体变成16px，div3背景变成绿色，字体变成8px。

我们会这样设计：

.div1{
     background-image:url('image1.png'); 
}
.div1 .div2{
     font-size:12px; 
     background-color:white; 
}
.div1 .div3{
     font-size:8px;
     background-color:yellow; 
}

.div1hover{
     background-image:url('image2.png'); 
}
.div1hover .div2{
    font-size:16px;
    background-color:red;
}
.div1hover .div3{
   font-size:8px;
   background-color:green; 

}

这样看着是不是有点乱，是的，略显得不简洁。我们用less的方法改造一下：

.div1 
{
   background-image:url('image1.png'); 
   .div2{
     font-size:12px; 
     background-color:white; 
   }
   .div3{
     font-size:8px;
     background-color:yellow; 
   }
}

.div1hover{
   background-image:url('image2.png'); 
   .div2{
    font-size:16px;
    background-color:red;
  }
  .div3{
   font-size:8px;
   background-color:green; 
  }
}

这样是不是感觉很简洁，嵌套关系很清晰？

less还有其他很多用法，可以帮助你编写更易维护，更清晰的css。大家去探索吧。