1、什么是CSS编译器_使用Less有什么好处

阅读() @2018-01-07 22:20:29

LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。在实际项目开发中,可以大大提升前端工程师的码砖效率!

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。

作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。

下面通过一个实例来简单看一下使用Less的好处:

1、传统的CSS书写方法:

.header .main .left{
    float:left;
}
.header .main .left a{
    text-decoration:underline;
    color:#fff;
}
.header .main .left a img{
    width:100px;
}

2、先写Less,然后编译成CSS代码:

@white:#fff;
.header .main .left a{
   color:@white;
}

通过以上这种方式,可以达到css代码复用,而且好处远不止这一点。

大概的流程就是:我们先写好less,然后依托nodejs的npm的less包,将less代码编译成css文件,然后引入html页面中即可使用。具体使用方法在后面的笔记中细说!

微信二维码