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命令面板
在启动的Node Js的Command控制面板直接输入下面的命令:
$ npm install less
这样就安装完LESS的编译命令,可以在本地正常编译LESS源文件。如果您想下载最新稳定版本的LESS,还可以尝试在Node JS的Command控制面板输入:
$ npm install [email protected]