为了账号安全,请及时绑定邮箱和手机立即绑定

less学习手册(小结)

标签:
CSS3

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

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
5
获赞与收藏
24

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消