自从用了Less 编写css,你比以前更快了~

当前位置 : 首页 > 网页制作 > CSS > 自从用了Less 编写css,你比以前更快了~

自从用了Less 编写css,你比以前更快了~

来源: 作者: 时间:2016-01-28 09:27
之所以用这个标题呢,主要是最近调侃杰伦太有意思了。好吧,开个玩笑而已。如果你了解过Less,并对之很熟悉,就不用往下看了。如果你没用过,恭喜,这是一个入门级的教程,学会了
之所以用这个标题呢,主要是最近调侃杰伦太有意思了。
 
好吧,开个玩笑而已。
 
如果你了解过Less,并对之很熟悉,就不用往下看了。
 
如果你没用过,恭喜,这是一个入门级的教程,学会了它,可以为你节省10%的绳命。
 
首先,我们得知道Less能干什么。如:
 
 
@width:300px;
@fonts:12px bold "宋体,Verdana";
.block-header{
    color:#5c5c5c;
    .elem-title{
        font:@fonts;
        width:@width;
    }
    .elem-content{
        width:@width;
        height:300px;
    }
}
.block-footer{
    font:@fonts;
    width:@width + 100px;
}
 
最后编译出来的css是这样的:
 
 
.block-header {
  color: #5c5c5c;
}
.block-header .elem-title {
  font: 12px bold "宋体,Verdana";
  width: 300px;
}
.block-header .elem-content {
  width: 300px;
  height: 300px;
}
.block-footer {
  font: 12px bold "宋体,Verdana";
  width: 400px;
}
 
如何安装(主要是基于sublime编辑器,其他编辑器自行google): 
 
用less进行编译css,有很多途径,可以用nodejs。当然我们希望以最简单的方式来完成,比如:新建一个 test.less文件,按 ctrl +s 即编译成 test.css.
 
要实现我所描述的功能,你只需要一个sublime编辑器,
Tag:
网友评论

<