css与less的不同及建议

随着前端开发的不断发展，人们编写项目样式的方式也越来越多，css与less就是其中两种，接下来我就为大家简单的说一下它们两者之间有什么区别。

背景 CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码使其看起来非常冗余,并且还非常的长 ，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少CSS 编写经验而很难写出组织良好且易于维护的 CSS代码，就比如,

<div class="app">  
<header>  
<div class="left">
    <div class="top">
        <div></div>
    </div>
    <div  class="top">
        <div></div>
    </div>
    <div  class="top">
        <div></div>
    </div>
</div>
<div class="right">
    <div  class="top">
        <div></div>
    </div>
    <div  class="top">
        <div></div>
    </div>
    <div class="top">
        <div></div>
    </div>
</div>
</header>
</div>
---------------------
没经验的人会这样写
.app {
width:100%;
height:100%;
}
header{
width:100%;
height:50px;
}
.left{
width:50%;
height:100%;
}
.right{
width:50%;
height:100%;
}
.left .top{
width:100%;
height:100%;
}
.right .top{
width:100%;
height:100%;
}
.left .top div{
width:100%;
height:100%;
}
.right .top div{
width:100%;
height:100%;
}

因此，为了方便前端开发的工作量，也就出现了less。
LESS（2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。）LESS保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。

.app {
width:100%;
height:100%;
    header{
    width:100%;
    height:50px;
    .left{
        width:50%;
        height:100%;
        .top{
            width:100%;
            height:100%;
            div{
            width:100%;
            height:200px;
            }
        }
       }
     .right{
        width:50%;
        height:100%;
        .top{
            width:100%;
            height:100%;
              div{
            width:100%;
            height:200px;
            }
            }
        }
    }
}

因此，即便是缺少CSS编写经验而很难写出组织良好且易于维护的 CSS代码的人们也可以借此大大的减少需要编写的代码的数量。虽然less由于使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件，虽然过程多了一层，但是毕竟less在书写的时候就方便很多，所以在我们使用less之前，只要我们提前设置好，就可以直接生成对应的css文件，而我们只需要关心我们的less文件即可。因此本人建议新人在缺少CSS编写经验时最好使用less方法进行编写。