初学Less

Less在CSS语法的基础上进行了扩展，主要包含：

• Variables（变量）
• Mixins（混合书写）
• Nested Rules（嵌套规则）
• Functions & Operations（功能和操作）
• Client-side usage（客户端使用）
• Server-side usage（服务端使用）

使用Less

Server-side usage

npm安装

npm install -g less

命令行使用

输出到stdout，直接在控制台显示

lessc styles.less

保存为文件

lessc styles.less styles.css

如果需要压缩，要先安装clean-css插件，然后执行命令

lessc --clean-css styles.less styles.min.css

在代码中使用

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, output) {
   
    console.log(output.css);
});

Client-side usage

link中的rel设置成stylesheet/less
先引入less文件，再引入less.js脚本

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

下载less.js

需要注意的是，在浏览器中使用Less虽然入门简单、开发便捷，但在实际项目中因为要考虑性能问题，一般推荐在服务端用node.js或其他第三方工具使用

语言特性

Variables

定义变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

输出

#header {
    color: #6c94be;
}

注意，Less中变量相当于“常量”，因为它们只能被定义一次

变量也可以用在选择器、属性名和字符串拼接中，用@{变量名}形式

/*注意：如果定义成@dialog: .dialog-