十分钟入门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文件了。 当你学得更多,你将能够写出更加好的代码。下面就是我们推荐你下一步需要阅读的:
【转发自http://www.cnblogs.com/zhuzhenwei918/p/6142144.html】