十分钟入门less(翻译自：Learn lESS in 10 Minutes(or less))
注：本文为翻译文章，因翻译水平有限，难免有缺漏不足之处，可查看原文。
我们知道写css代码是非常枯燥的，尤其是写重复颜色、样式的代码，这需要我们付出很多努力来保持css代码可维护，但是它本不应该是这样的。
很幸运地是，web开发社区已经解决了这个问题，我们在现在已经有了类似与less、sass和stylus这样的预处理器。它们有很多优于一般的css之处，如下所示：
- 变量---以至于我们可以在样式表中定义和轻松地改变值。
- 动态计算值。在css中我们有calc。
- Mixins---使得我们重用和结合样式。它甚至还支持传递参数。
- 函数---它给我们大量方便的功能来操作颜色、转换图片等等。
不足之处在于如果你使用他们其中的一种预编译器，你需要把它编译成普通的css这样他才能在你的浏览器中工作。
第一部分：Getting Started
Less 它需要Node.js或者一个web 浏览器来运行。你也可以在你的站点引用less.js，这样它就可以实时地编译所有的.less样式表，但是这是很慢的，并且我们不推荐。推荐的方式是提前编译你的less样式表成为.css文件来使用。有很多免费的地方可以帮你编译less文件，但是在这篇文章中我将使用node.js。
如果你安装了node，并且你知道什么是终端，就打开它，使用npm安装它：
npm install -g less
这将可以使得你的less文件编译成css文件像下面这样：
lessc style.less > style.css
通过上面这行代码，我们的代码将会被转换为普通的css文件与styles.css中。
第二部分：变量
less的一个主要特点就是可以创造变量，像一门标准的编程语言，它可以存储任何类型的变量，比如：颜色，选择器，尺寸，字体名字等等。less的思想在于使得css有了编程语法成为可能。
现在我们定义了个变量，一个背景颜色和一个字体颜色，它们都包含16进制码。观察下面的两个版本：
less如下所示：
@background-color: #ffffff;
@text-color: #1A237E; p{
background-color: @background-color;
color: @text-color;
padding: 15px;
} ul{
background-color: @background-color;
} li{
color: @text-color;
}
编译后css如下：
p {
background-color: #ffffff;
color: #1a237e;
padding: 15px;
}
ul {
background-color: #ffffff;
}
li {
color: #1a237e;
}
在上面的例子中，背景颜色为白色，字体为黑色。如果，我们想要改变所有的颜色，我们可以轻松地改变变量的值，而不需要手工的修改每一处。
第三部分：Mixins
less可以是我们使用一个存在的class或者id引用到其他的选择器中，例子如下：
less文件：
#circle{
background-color: #4CAF50;
border-radius: 100%;
}
#small-circle{
width: 50px;
height: 50px;
#circle
}
#big-circle{
width: 100px;
height: 100px;
#circle
}
css文件：
#circle {
background-color: #4CAF50;
border-radius: 100%;
}
#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: 100%;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 100%;
}
另一个非常酷的事情是mixins可以接收变量，在下面的例子中我们文circles中的width和height添加了一个参数，并且有一个默认值25px。下面的代码将会创造一个一个25x25的小圆和一个100x100的大圆。
less文件：
#circle(@size: 25px){
background-color: #4CAF50;
border-radius: 100%;
width: @size;
height: @size;
}
#small-circle{
#circle
}
#big-circle{
#circle(100px)
}
css文件：
#small-circle {
background-color: #4CAF50;
border-radius: 100%;
width: 25px;
height: 25px;
}
#big-circle {
background-color: #4CAF50;
border-radius: 100%;
width: 100px;
height: 100px;
}
（补充：这里使用了参数的mixins之后，我们发现和上一个例子相比，这里仅仅是添加了类，而原来被添加的类没有被保存，而上一个例子中，被添加的类也被保存了，请注意。）
第四部分：嵌套和作用域
嵌套可以用于结构化我们的样式表，这样可以和我们的HTML结构相匹配，从而减少了冲突。下面是一个无序列表和它的子元素的例子：
less文件：
ul{
background-color: #03A9F4;
padding: 10px;
list-style: none;
li{
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}
}
css文件：
ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}
就像在编程语言中一样，在less中的变量接收他们的值决定于作用域。如果值在特定的作用域中不存在，那么LESS将会到上级的作用域中寻找直到它找到了最近的声明。（补充：这里我认为less中存在的是块级作用域）
下面这个例子，转换成css，我们的li就将会有白色的字体，因为我们提前定义了@text-color在ul的规则中。
less文件：
@text-color: #000000;
ul{
@text-color: #fff;
background-color: #03A9F4;
padding: 10px;
list-style: none;
li{
color: @text-color;
border-radius: 3px;
margin: 10px 0;
}
}
css文件：
/* line 3, text.less */
ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
/* line 9, text.less */
ul li {
color: #ffffff;
border-radius: 3px;
margin: 10px 0;
}
第五部分：操作
你可以对于数值和颜色做简单的数学操作。如果说我们想要将两个div紧挨着，第二个div是第一个的两倍宽，并且有一个不同的背景，less知道如何测量并且不会弄混他们。
less文件：
@div-width: 100px;
@color: #03A9F4; div{
height: 50px;
display: inline-block;
} #left{
width: @div-width;
background-color: @color - 100;
} #right{
width: @div-width * 2;
background-color: @color;
}
css文件：
div {
height: 50px;
display: inline-block;
}
#left {
width: 100px;
background-color: #004590;
}
#right {
width: 200px;
background-color: #03a9f4;
}
第六部分：函数
less同样也有函数！ 它看起来更像一门编程语言了，不是吗？ 我们看看淡出的效果吧，看看一个函数是如何减少颜色的透明度的。
less文件：
@var: #004590;
div{
height: 50px;
width: 50px;
background-color: @var;
&:hover{
background-color: fadeout(@var, 50%)
}
}
css文件：
div {
height: 50px;
width: 50px;
background-color: #004590;
}
div:hover {
background-color: rgba(0, 69, 144, 0.5);
}
根据上面的代码，当我们的div被划过是，它就会变得半透明。还有大量的有用的函数来操作颜色、检测图片的大小、甚至嵌入资源到样式表中像data-uri一样。在这里看全部的函数。
进一步阅读
你现在对less知道的足够多去开始深入学习了！ 每一个css文件都是一个有效的less样式表，所以你现在可以清理哪些旧的、笨拙的css文件了。 当你学得更多，你将能够写出更加好的代码。下面就是我们推荐你下一步需要阅读的：
The only place success comes before work is in the dictionary.
---成功在努力之前这回事只能在字典里看到。