关闭

less总结

标签: less总结
63人阅读 评论(0) 收藏 举报
  • 注释
 /*会被编译*/
 //不会被编译
  • 变量
@test_width:300px;
  • 混合

例一:

.box {width:@test_width;  .border; }
.border {border:1px solid red;}
编译后-->.box {width:300px; border:1px solid red;}

例二(带参数或默认值):

.border(@border_width:10px) {border:solid red @border_width;}
.test01 {.border(30px);}  编译后-->.test01 {border:solid red 30px;}
.test02 {.border();}  编译后-->.test02 {border:solid red 10px;}
  • 匹配模式
.triangle(top,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:transparent transparent @c transparent; 
     border-style:dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:transparent @c transparent transparent; 
     border-style:dashed solid dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:@c transparent transparent transparent; 
     border-style:solid dashed dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:transparent transparent transparent@c ; 
     border-style:dashed dashed dashed solid;
}
//都会执行下面的@_
.triangle(@_,@w:5px,@c:#ccc) 
{
    width:0; 
    height:0; 
    overflow:hidden;
}
.sanjiao {.triangle(top);}       
编译后-->
.sanjiao 
{
    width:0; 
    height:0; 
    overflow:hidden;
    border-width:5PX; 
    border-color:transparent transparent #CCC transparent; 
    border-style:dashed dashed solid dashed;
}
  • 运算
@text_01:300px;
.box02 {width:@text_01+20;} 编译后-->  .box02 {width:320px;}
  • 嵌套
.list 
{
    width:30px;
    a {color:yellow;}          //编译后-->.list a {color:yellow;}
    /* &代表上一层选择器 */
    a {&:hover:color:red}     //编译后--> .list a:hover {color:red;}
}
  • 避免编译
.text_03 {width:~’calc(300px-30px);}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25604次
    • 积分:517
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:2篇
    • 译文:0篇
    • 评论:9条
    最新评论