less入门

参考来源：http://www.bootcss.com/p/lesscss/

less简介

  less是一种 动态 样式 语言。

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

less引入

方法一

在头部通过link引入

 <link rel="stylesheet/less" type="text/css" href="styles.less" />

下载less.js然后在less之后引入less.js

<script src="less.min.js" type="text/javascript"></script>

注：本地运行的话，由于chrome的安全策略，会导致无法解析rel="stylesheet/less"，从而导致加载失败。firefox和IE没有此限制。

方法二

安装less

npm install -g less

写好.less文件后，使用以下代码将less文件编译为css文件

lessc styles.less > styles.css

less兼容性

  如果采用less.js引入的话，据官网宣称，less支持IE6+。但实测中，less（v2.2.0）由于使用了function.bind的方法，导致less.js只能在IE9+才能正常使用。hack方法

  使用npm安装less的话，由于和less并没有直接关系，只是将less转换为css，因此兼容所有浏览器（当然，要是使用了一下不兼容的属性，例如border-radius之类的，就不属于less的锅了）

less语法

变量

  在实际项目中经常得整个公司保持某种风格，例如阿里的是橙色主色调。所以很多按钮背景色、块背景色、字体颜色等等都会用同一种橙色。但是，如果以后公司需要更换主色调，那么一个个改颜色将会累死人。而如果我们将这个颜色设定为全局变量，那么只需要改一次就够了。
  less的变量用@开头，key后面又冒号，例如：

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

函数 & 运算

less支持简单计算，并提供了一些计算函数

@color: #111;

#header {
  color: @color * 2; // #222
}
h2 {
  color: lighten(@color, 50%); // #c3c3c3
}

混合

我们可以将一个写好的选择器的样式写入另一个选择器中，达到继承的目的。

@color: #111;
@size: 12px;

#header {
  color: @color * 2; // #222
}
h2 {
  #header;
  font-size: @size;
}

编译的结果为：

#header {
  color: #222;
}
h2 {
  color: #222;
  font-size: 12px;
}

自定义函数/默认参数

每个选择器都可以作为函数名，后面的参数可以设定默认值，如果实参为空时则使用默认值。

@base: #444;

.base (@light : 0) {
    color: lighten(@base, @light);
}
h1 {
    color: @base;
}
h2 {
    .base (10%);
}
h3 {
    .base (50%);
}

编译结果为：

h1 {
  color: #444444;
}
h2 {
  color: #5e5e5e;
}
h3 {
  color: #c3c3c3;
}

嵌套

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

编译结果：

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

监视模式

注：表示本人没开启成功过，至今不清楚原因。如果有人知道请不吝赐教。

  监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。
  要使用它，只要在URL后面加上’#!watch’，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。