原文 http://segmentfault.com/a/1190000004137275
css编写样式表我想大家应该都已经熟悉了。我在这里说的是使用 sublime 的插件进行less样式的编写，使用起来比原本的直接编写css样式，更加的简单与方便，css代码也变得更加的整齐。
sublime上直接使用less编写css代码
准备
电脑上的sublime已经安装了Less2Css插件。
电脑上安装了nodejs,并全局安装lessc插件。
使用（简单）
直接新建一个aa.less的文件，在其中编写less的代码。
ctrl+s保存下，在目录中出现aa.css文件可以直接在页面中使用。
less的简单介绍
什么是 less
LESSCSS是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css的赋予了动态语言的特性，如变量，继承，运算，函数等，更加方便css的编写和维护。
变量
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。
@color:#4d926F;#header{ color:@color;}h2{ color:@color}//编译后--#header{ color:#4d926F;}h2{ color:#4d926F;}登录后复制
混合
可以将一个定义好的classA 轻松的引入到另外一个classB中。
.rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } // 编译后 -- #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }登录后复制
嵌套（最常使用）
我们可以在一个选择器中嵌套一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
#header{ h1{ font-size:26px; font-weight:bold; } p{ font-size:12px; a{ text-decoration: none; &:hover{ border-width: 1px; } } } } // 编译后 -- #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }登录后复制
函数和运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值直接的复杂关系。
@the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); } // 编译后-- #header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }登录后复制