继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

less学习手册(小结)

黄健杰
关注TA
已关注
手记 5
粉丝 5
获赞 24

/*变量
@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 会加在所有样式后面*/

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP