Less 是什么? Less is more,than CSS.
Less就是搞笑高效编写和维护CSS的一种语法。
1.下载Koala考拉,一款国人编写的less开发器。
2.可以用Sublime Text3编写Less文档。
好,开始学习啦!
1. 注释
/*会被编译到css文件的注释*/
//不会编译...
2.变量
声明:@变量名:值(+单位)
使用:@变量名
3.混合(有点像函数,又像宏定义)
把某个选择器(class或者id或者一些html标签)的效果应用在当前的选择器,
当前{
.某个类;
}
可以加参数
.当前类{
.某个类(一个数);
}
.某个类(@参数1){
属性:@参数1;
}
参数可带默认值
.当前类{
.某个类(可省略);//括号不能省略
}
.某个类(@参数1:默认值){
属性:@参数1;
}
3.匹配模式(就像if判断)
.当前类{
.某个类(flag1,值);
//调用flag1的那个
}
.某个类(flag1,@参数1:默认值){
属性:@参数1;
}
.某个类(flag2,@参数1:默认值){
属性:@参数1;
}
固定带上的,也就是不管是flag1还是flag2,该类都有的属性。
.某个类(@_,@参数1:默认值){
属性:...
}
4.运算
就是变量的+-*/()运算。
width:@w+20;
可不带单位
5.嵌套
将下面css写法改为嵌套写法
.list{
...
}
.list a{
...
}
.list span{
...
}
这样嵌套
.list{
...
a{...}
span{...}
}
另外&符号表示上一层选择器
.list{
...
a{
...
&:hover{...}
}
}
6.@arguments变量
可以代表所有传参。
.border(@w:30px,@c:red,@xx:solid){
border:@w,@c,@xx;
}
.border(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
@arguments(40px);
这样就可以设置第一个参数。
7.避免编译 和 !important
~'这里面的内容不会编译出来'
可以用来放滤镜、不需要less计算出来的内容。
.test_important{
.border()!important;
}
它会在混合的所有属性后面加上!important
8.导入less/css文件
@import "ku" ;
//导入ku.less,编译时一起编译出来
@import "a.css";
//导入a.css,不编译,在css里还是有'导入a.css'的作用
@import (less) "a.css";
//导入a.css,编译。
9.加个括号可以让没用到的混合不编译
.xx(){...}