/*变量
@test_width:300px;用@开头
混合
.box{
.box2 将box2的属性全部给box1
}
参数
.text(@text){
border:solid yellor @text;
}
.text(20px)
混合--默认带值---传值带括号,不传值不需要
.text(@txt:30px){
left:@txt;
}
.box_rodius 需要兼容-webkit- -moz-
匹配模式 相当于if
.sanjiao(right,@w:5px,@c:#ccc){
border_width:@w;
bordercolor:transparent transparent transparent red;
border-style:dashed dashed dashed solid;
}
.sanjiao(@,@w:5px,@c:#ccc){
width:0px; height:0px; overflow:hidden; 无论if选择哪个都必须匹配@_
}
.box{
.sanjiao(right,100px,#000)
}
leg:匹配模式定位
.pso(r){
position:relative;
}
.pso(a){
position:absolute;
}
.pso(f){
position:fixed;
}
运算:+-/ *
@w:200px;
.box02{
width:@w+30 230px
color:#ccc-10 会转换成250,250,250,计算
}
嵌套
css写法
li{ }
li a{ }
li a span{ }
less写法
li{
a{}
span{
s{}
}
}
css :hover写法
a{}
a:hover{}
less:hover写法
li{
a{
&:hover &代表他的上一层选择器
}
}
@arguments 包含所有的变量
.box(@w:50px,@c:red,@xx:solid){
box:@arguments 包含所有的变量
}
避免编译
.box{
width:~'300px-30' 会原封不动的编译出来
}
!important 会加在所有样式后面*/
共同学习,写下你的评论
评论加载中...
作者其他优质文章