动态样式语言Less学习笔记

介绍资料参见：http://www.bootcss.com/p/lesscss/

 

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

1、在引入less.js前先要把你的样式文件引入 :

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

2、变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

3、混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

 4、嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

5、函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

6、引导

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。

为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

when关键字用以定义一个导引序列(此例只有一个导引)。

在导引序列中可以使用and，not关键字实现与条件

7、is*函式

如果想基于值的类型进行匹配，我们就可以使用is*函式：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

  如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：

  • ispixel
  • ispercentage
  • isem

8、运算

任何数字、颜色或者变量都可以参与运算.

9、Color 函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作

10、Math 函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值

11、命名空间

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用

12、作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

13、Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带

14、字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构

15、JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用