CSS预处理器实践:Less安装

浏览数：31 / 时间：2015年06月09日

CSS不是一种编程语言。

你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。

很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

什么是Less

LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

Mixins，此处我译成了混合，也有很多同行朋友将其译成混入，不管是混合也好，还是混入也罢。其主要意思是将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性。
Parametric，带参数混合，像函数一样在class A中定义一个参数的默认值、或者参数属性集合，还可以是@arguments蛮量，然后将定义好的class A引入class B中
Nested Rules译成嵌套规则，指的是在一个选择器中嵌套另一个选择器来实现继承。从而减少了代码量，并且增加了代码的可读性。
Operations运算，在CSS中使用加、减、乘、除进行数学运算，主要运用于属性值和颜色的运算，可以轻松实现属性值之间的复杂关系。
Color function颜色功能，颜色的函数运算，颜色会先被转化成HSL色彩空间，然后在通道级别操作。
Namespaces命名空间，将一些变量或者混合模块打包封装，更好的组织CSS和属性集的重复使用；
Scope作用域，先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作域非常的相似；
Javascript evaluation，javascript的表达式,在Less或sass文件中可以使用js的表达式,用来赋值。
——大漠
转自:http://www.cn-sass.com/译文/an-introduction-to-less-and-comparison-to-sass.html

安装

LESS的安装和Sass安装有所不同，他不需要依赖于Ruby环境，就能直接安装使用。不过LESS安装分为两种：客户端和服务器端安装。

客户端安装

去下载一个你要的less.js脚本；
创建一个文件来放置你的样式，比如说style.less
添加下面的代码到你的HTML的<head>中。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

请注意<link>的rel属性。你需要在属性值后面使用/less，LESS才起作用。你也需要在<link>样式表后面引入<script>。如果你正在使用“HTML5”语法，我无法想像为什么你不会用呢？你可以少去type="text/css"和type="text/javascript"。

安装LESS有两个细节需要特别强调，往往很多人就是这里出错：
调用LESS样式表时，<link>标签的rel属性一定是stylesheet/less，其中/less不可缺少；
less.js脚本只能放在加载LESS样式的<link>后面，才能生效。
——大漠

服务器端安装

LESS在服务器端的使用主要是借助于LESS的编译器，将LESS源文件编译生成最终的CSS文件，目前常用的方式是利用node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS文件进行编译。如此一来，LESS在服务器的安装和Sass的安装有点相似，不同之处是他们需依赖的环境不一样，LESS需要的是Node JS环境，而Sass需要的是Ruby环境，为了让大家能更清晰的知道如何在服务器端安装LESS，此处简单的过一下安装过程（本文演示的是在Window7下的安装方法）。

首先到Node Js的官网下载一个适合Windows系统的安装文件.

安装文件下载后，按正常应用程序方法一样安装。安装完成后在开始菜单中启用Node js的Command控制面板：

启动NodeJs命令面板