less学习笔记(一)
less的写法如下
.content {
ul{
list-style: none;
}
li{
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
a{
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
}
}
注释的写法
//只会在LESS中显示
/*就会在LESS和CSS中显示*/
编译less的一个工具koala(学习node.js之前可以使用)
定义变量用@开头
定义变量为属性名或者选择器时:
@a:width;
.@{a}{
@{a}:960px;
}
定义变量为url时:@url:"/*里面是地址*/";
定义变量又延迟加载特性,即可以先使用变量,后定义变量;
定义多个变量时采用在同一兄弟作用域就近原则取值。
混合模式:把共同的css样式放入一个类似于类的选择器中:.a(){/*共同的样式*/}
使用时在样式中加上.a即可饮用.a()中的样式
带选择器的混合:.b{&:hover:{border:1px solid red;}}
div{.b();}
带参数的混合:.b(@color:red){border:1px solid @color}
div{&hover{b(yellow)}}
&:带表当前元素的父元素,如果把&放在选择器后,就会将当前选择器插入到所有父选择器之前;
传有多个参数时:
如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数值,
如果传参的括号里面既有“,”又有“;”那么,会把“;”前面的看作一个整体,传给一个参数值
命名参数:
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
.class3{
.mixin(@padding: 80px;)
}
@arguments的使用:
.border(@x:solid,@c:red){
border: 21px @arguments;
}
.div1{
.border(solid);
}
匹配模式的使用:
.border(all,@w: 5px){
border-radius: @w;
}
.border(t_l,@w:5px){
border-top-left-radius: @w;
}
.border(t_r,@w:5px){
border-top-right-radius: @w;
}
.border(b-l,@w:5px){
border-bottom-left-radius: @w;
}
.border(b-r,@w:5px){
border-bottom-right-radius: @w;
}
footer{
.border(t_l,10px);
.border(b-r,10px);
background: #33acfe;
}
混合的返回值:
.average(@x, @y) {
@average: ((@x + @y) / 2);
@he:(@x + @y);
}
div {
.average(16px, 50px);
padding: @average;
margin: @he;
}
运算:
less会自动为你推断出单位,所以只要在运算时有任意一个值有单位就能实现运算
less在运算时,先将颜色值转为rgb模式,然后再转换为16进制的颜色值并返回
rgb模式他的值是 0~255 ,当你的值超过255 ,那么就会以255进行相加操作
运算时不能直接使用英文颜色名称进行运算
函数:
rgb在less中是一个函数,会返回16进制的颜色值
red(),green(),blue()传入一个16进制的颜色值会返回一个相应颜色的十进制值
命名空间:
demo1:
#bgcolor(){
background: #ffffff;
.a{
color: #888888;
&:hover{
color: #ff6600;
}
.b{
background: #ff0000;
}
}
}
.wi{
background: green;
color: #fff;
.a{
color: green;
background: #ffffff;
}
}
.bgcolor1{
background: #fdfee0;
#bgcolor>.a;
}
.bgcolor2{
.wi>.a;
}
demo2:
//省略>写法
#bgcolor(){
background: #ffffff;
.a{
color: #888888;
&:hover{
color: #ff6600;
}
.b{
background: #ff0000;
}
}
}
.wi {
background: green;
color: #fff;
.a {
color: green;
background: #ffffff;
}
}
.bgcolor1{
background: #fdfee0;
#bgcolor .a;
}
.bgcolor2{
.wi .a;
}
总结命名空间:有以上两个demo可见,less中引用重复的样式时与css中使用子集选择器的方式相类似。