亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消