{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"

.