前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Less 常用基础知识

Less 常用基础知识

作者头像
用户1197315
发布2018-01-19 18:06:15
4030
发布2018-01-19 18:06:15
举报
文章被收录于专栏:柠檬先生柠檬先生

LESS 中的注释   也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。   也可以使用// 注释 不会被编译的 变量   声明变量的话一定要用@开头 例如:@变量名称:值;

  @test_width:300px;   .box{       width:@test_width;       height:@test_width;       background-color:yellow;     } 混合-(Mixin)   混合(mixin)变量     例如: .border{border:solid 10px red}     .box{       width:@test_width;       height:@test_width;       background-color:yellow;       .border;     }   带参数的混合     .border-radius(@radius){css 代码}     可认定默认值     .border-radius(@radius:5px){css 代码}   混合-可带的参数     .border_02(@border_width){       border:solid yellow @border_width;     }     .test_hunhe{       .border_02(30px);     }   混合 -默认带值     .border_03(@border_width:10px){         border:solid green @border_width;     }     .test_hunhe_03{       .border_03();     }     .test_hunhe_04{       .border_04(20px);     }   混合的例子     .border_radius(@radus:5px){         -webkit-border-radius:@radius;         -moz-border-radius:@radius;         border-radius:@radius;       }     .radius_test{       width:100px;       height:40px;       background-color:green;       .border_radius();     } 匹配模式       .sanjiao{         width:0;         height:0;         overflow:hidden;         border-width:10px;         border-color:transparent transparent red transparent;         border-style:dashed dashed solid dashed;      }

    .triangle(top,@w:5px,@c:#ccc){             border-width:@w;             border-colo:transparent transparent @c transparent             border-style:dashed dashed solid dashed;       }     .triangle(bottom,@w:5px,@c:#ccc){             border-width:@w;             border-colo:@c transparent transparent transparent             border-style:solid dashed dashed dashed;       }     .triangle(left,@w:5px,@c:#ccc){           border-width:@w;           border-colo: transparent @c transparent transparent           border-style: dashed solid dashed dashed;       }     .triangle(right,@w:5px,@c:#ccc){           border-width:@w;           border-colo: transparent transparent transparent @c;           border-style: dashed dashed dashed solid;       }     .trangle(@_,@w:5px,@c:#ccc){ //@_ 什么时候都带着的。           width:0;           height:0;           overflow:hidden;       }     .sanjiao{       .trangle(top,100px);       }   // 匹配模式- 定位     .pos(r){       position:relative;     }     .pos(a){       position:absolute;     }     .pos(f){       position:fixed;     } 运算   @test_01:300px;   .box_02{     width:@test_01 +20;   }   .box_02{     width:@test_01 -20;   }   .box_02{     width:(@test_01 20) *5;     color:#ccc -10;   } 嵌套:   .list{       width:600px;       margin30px auto;       padding:0;       list-style:none;       li{         height:30px;         line-height:30px;         background-color:pink;         margin-bottom:5px;       }       a{         float:left;         &hover{         color:red; //& 代表他的上一层选择器。         }       }     } @arguments 变量     @arguments 包含了所有的传递进来的参数。       .border_arg(@w:30px,@c:red,@xx:solid){       .border:@arguments;     } 避免编译   .test_03{     width:~'calc(300px -30)';   }

!importan关键字     .test_important{       .border_radius() !important;   }

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-04-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档