十分钟入门less(翻译自：Learn lESS in 10 Minutes(or less))

十分钟入门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{
   50px;
  height: 50px;
  #circle
}

#big-circle{
   100px;
  height: 100px;
  #circle
}

　　css文件：

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
   50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
   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%;

   @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

　　css文件：

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
   25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
   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- 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
   @div-width;
  background-color: @color - 100;
}

#right{
   @div-width * 2;
  background-color: @color;
}

　　css文件：

div {
  height: 50px;
  display: inline-block;
}
#left {
   100px;
  background-color: #004590;
}
#right {
   200px;
  background-color: #03a9f4;
}

第六部分：函数

　　less同样也有函数！ 它看起来更像一门编程语言了，不是吗？ 我们看看淡出的效果吧，看看一个函数是如何减少颜色的透明度的。

　　less文件：

@var: #004590;

div{
  height: 50px;
   50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

　　css文件：

div {
  height: 50px;
   50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

　　根据上面的代码，当我们的div被划过是，它就会变得半透明。还有大量的有用的函数来操作颜色、检测图片的大小、甚至嵌入资源到样式表中像data-uri一样。在这里看全部的函数。

　　

 

　　进一步阅读

　　你现在对less知道的足够多去开始深入学习了！ 每一个css文件都是一个有效的less样式表，所以你现在可以清理哪些旧的、笨拙的css文件了。 当你学得更多，你将能够写出更加好的代码。下面就是我们推荐你下一步需要阅读的：

• 所有的语法：link
• less函数参考：link
• 在浏览器中在线编辑和编译：link

【转发自http://www.cnblogs.com/zhuzhenwei918/p/6142144.html】