专栏首页柠檬先生Less 常用基础知识

Less 常用基础知识

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;   }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基础(二)

    嵌套-伪类嵌套    伪类嵌套和属性嵌套非常类似,只不过他需要借助“&”符号一起配合使用     例如:sass       .clearfix{ ...

    用户1197315
  • css3 UI 修饰——回顾

    1.box-shadow 属性向框添加一个或者多个阴影。   语法: box-shadow: h-shadow v-shadow blur spread col...

    用户1197315
  • css3弹性盒子模型——回顾。

    1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。     语法:box-...

    用户1197315
  • element-ui el-input只显示下划线

    只需要增加样式 .el-input__inner { width: 220px; border-top-width: 0px; border-left-w...

    hbbliyong
  • 三. CSS layout(布局)

    网页是一个多层的结构,一层摞着一层,通过CSS可以分别为每一层来设置样式,作为用户来讲只能看到最顶上一层,这些层中,最底下的一层称为文档流,文档流是网页的基础,...

    小海怪的互联网
  • CSS深入理解学习笔记之border

    1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

    就只是小茗
  • CSS边框

    border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

    十月梦想
  • less

    less的编译有两大类 第一类:基于node环境编译less 第二类:基于浏览器环境 第一类

    河湾欢儿
  • 项目常用的less语法详解

    双愚
  • CSS理解之border

    小胖

扫码关注云+社区

领取腾讯云代金券