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;
}
</div>