Less css预处理语言
特性：变量、继承、运算、函数
编译器
1、koala
http://koala-app.com/index-zh.html
https://github.com/oklai/koala
2、sublime插件
less # 语法高亮 less2css # 保存自动生成同名的css文件
需要安装node环境+node插件
npm install -g less npm install -g less-plugin-clean-css
报错：
less2css error: `lessc` is not available
重启sublime
配置保存时不进行压缩
{ "minify": false }
语法
1、注释
/**/ # css中的注释 // # 编译时会被自动过滤
2、变量
以@开头，例如：
@变量:值;
@text_with: 200px; .box{ width: @text_with; heigth: @text_with; background-color: yellow; }
编译结果
.box { width: 200px; height: 200px; background-color: yellow; }
3、混合
类似其他语言中的函数
.border{ border: solid 5px pink; } .box-border{ .border; width: 200px; height: 200px; background-color: green; }
编译结果
.border { border: solid 5px pink; } .box-border { border: solid 5px pink; width: 200px; height: 200px; background-color: green; }
4、混合带参数
.box{ width: 200px; height: 200px; background-color: yellow; .border(green); // 混合 } .border(@color){ border: solid 5px @color; }
编译结果
.box { width: 200px; height: 200px; background-color: yellow; border: solid 5px green; }
5、混合默认参数
.box{ width: 200px; height: 200px; background-color: yellow; .border(); } .border(@color: 10px){ border: solid 5px @color; }
编译结果
.box { width: 200px; height: 200px; background-color: yellow; border: solid 5px 10px; }
6、混合示例
.box{ width: 200px; height: 200px; background-color: green; .border-radius() } .border-radius(@radius: 5px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
编译结果
.box { width: 200px; height: 200px; background-color: green; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
7、匹配模式
类似其他语言中的if语句
@charset "utf-8"; .box-line(top, @boder-width:5px){ border-top: solid @boder-width red; } .box-line(bottom, @boder-width:5px){ border-bottom: solid @boder-width red; } .box-line(left, @boder-width:5px){ border-left: solid @boder-width red; } .box-line(right, @boder-width:5px){ border-right: solid @boder-width red; } // 不管匹配到谁，以下样式都会被输出 .box-line(@_, @boder-width:5px){ background-color: green; width: 200px; height: 200px; } .box{ .box-line(right) }
编译结果
@charset "utf-8"; .box { border-right: solid 5px red; background-color: green; width: 200px; height: 200px; }
8、运算
支持 + - * /
@default-width: 20px; .box{ width: @default-width + 20; }
编译结果
.box { width: 40px; }
9、嵌套
.list{ list-style: none; width: 500px; margin: 30px auto; li{ height: 20px; } a{ float: left; // & 表示上一层选择器 &:hover{ color: red; } } }
编译效果
.list { list-style: none; width: 500px; margin: 30px auto; } .list li { height: 20px; } .list a { float: left; } .list a:hover { color: red; }
10、@arguments
获取所有参数
.box{ .border-color(); } .border-color(@width: 30px, @color: red){ border: solid @arguments; }
编译效果
.box { border: solid 30px red; }
11、避免编译
.box{ height: calc(20px + 10px); // 避免编译 width: ~'calc(20px + 10px)'; }
编译效果
.box { height: calc(20px + 10px); width: calc(20px + 10px); }
12、!important
.box{ height: 20px !important; }
编译效果
.box { height: 20px !important; }
12、文件导入
hi.css
.hi{ height: 20px; }
hello.less
.hello{ width: 20px }
main.less
// 引入less文件 @import "hello"; // 引入 css文件 @import "hi.css"; // 引入 css文件 转为 less @import (less) "hi.css";
编译效果
main.css
@import "hi.css"; .hello { width: 20px; } .hi { height: 20px; }
