您现在的位置:首页 >> 前端 >> 内容

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

时间:2013/12/14 8:10:32 点击:

  核心提示:之所以用这个标题呢,主要是最近调侃杰伦太有意思了。好吧,开个玩笑而已。如果你了解过Less,并对之很熟悉,就不用往下看了。如果你没用过,恭喜,这是一个入门级的教程,学会了它,可以为你节省10%的绳命。...
之所以用这个标题呢,主要是最近调侃杰伦太有意思了。

 

好吧,开个玩笑而已。

 

如果你了解过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编辑器,

作者:网络 来源:不详