{less}概览

less

less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合(mixin)、函数等功能，降低了CSS的维护成本。

应用方式

less可以直接在客户端使用，也可以在服务器端。这里使用node.js的包管理工具npm安装在服务器端使用。

$ npm install -g less

安装好后调用以下命令调用less编译器并输出到指定的文件：

$ lessc xxx.less > xxx.css

相关HTML文件把xxx.css链入即可使用>.<

如果报错：'lessc' is not recognized as an internal or external command, operable program or batch file.可能是未全局安装，或未设置环境变量。我遇到这个错误了>.<相关解决方法地址。

也可在代码中调用less编译器(Node平台)。

var less = require("less");

less.render(".calss {width: (1 + 1)}", function(error, css) {
 console.log(css);
});

//手动调用分析器(paser)和编译器：

var parser = new(less.Parser);

parser.parse(".class {width: (1 + 1)}", function(error, tree) {
 if(error) {
  return console.log(error);
 }
 console.log(tree.toCSS());
});

//可以给编译器传递多个参数

var parser = new(less.Parser)({
 paths: [".", "./lib"], //为@import指令指定查找路径
 filename: "style.less" // 指定文件名，更好的处理错误信息
});

parser.parse(".class {width: (1 + 1)}", function(error, tree) {
 tree.toCSS({
  //压缩CSS输出代码量
  compress: true
 });
});

语言特性概览

• 变量： @name: value;

@nice-blue: #5b83ad;

.header {
 color: @nice-blue;
}

//编译后
.header {
 color: #5b83ad;
}

• 混合(mixin)： 可以把含有一堆属性的规则加到另一组规则中,这样我们就可以在这组规则中用那一堆属性了。

.divBorder {
 border-top: solid 1px black;
 border-bottom: dotted 1px black;
}
//只用把`.divBorder;`写入即可。
#menu {
 color: @nice-blue;
 .divBorder;
}

• 嵌套规则： 比起分开更能直观体现HTML的结构也更简单。

#header {
 color: black;
}
#header .navigation {
 font-size: 12px;
}

//嵌套后
#header {
 color: black;
 .navigation {
  font-size: 12px;
 }
}

//伪类选择器也可以使用嵌套，`&`表示当前选项的父选择器
//此处&既是指#alink
#alink {
 text-decoration: none;
 &:hover {
  cursor: pointer;
 }
}

• 运算： 任何数字、颜色或变量都可以参与运算。运算结果中的单位为在该次运算中出现过的单位。

@base: 5%;
@another: @base * 2;

color: #888/4;

@var: 1px + 5; // 6px

• 函数： less有内置的函数，用于转换颜色、处理字符串、算数运算等。

@num: 0.5;

.class {
 width: percentage(@num);
}

• 命名空间&存取： 有时为了组织性目的或为了提供封装，可能需要把变量和混合分组。在less中可以非常直观的做这件事。

#bundle {
 .button {
  display: block;
  border: 1px solid black;
  &:hover {
   cursor: pointer;
  }
 }
 .other {...}
}

//在`#header a`中用混入`#bundle`的`.button`
#header a {
 text-decoration: none;
 #bundle > .button;
}

• 作用域： less中的作用域和编程语言很像，编译器会从最里层开始一层一层往上找诸如变量和混合。

@var: red;
#page {
 @var: white;
 #header {
  color: @var; //white
 }
}

#box {
 #boxHead {
  color: @var; //white
 }
 @var: white;
}

• 注释： /*块级注释*/和//行注释

• 导入(import)： 导入.less文件，则此文件中的全部变量都可以使用了。@import "library.less"。

.