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 条评论
登录 后参与评论

相关文章

来自专栏aCloudDeveloper

大神洗礼第四讲——函数相关及编程技巧

Author:bakari       Date:2012.11.2 1、参数传递问题: < 1 >、堆栈传参 < 2 >、寄存器传参(利用通用寄存器进行函数参...

212100
来自专栏不止是前端

从实现一个Promise说起

14430
来自专栏用户2442861的专栏

Python基础学习笔记之(二)(华工大神)

         Python中每一个.py脚本定义一个模块,所以我们可以在一个.py脚本中定义一个实现某个功能的函数或者脚本,这样其他的.py脚本就可以调用...

12840
来自专栏光变

2.2 ASM-类-接口和组件

ASM API对编译类进行生成和编辑,都是基于抽象类ClassVisitor实现的(参照表格 2.4)。 该类中的每一个方法都对应class文件中的同名的结构部...

20310
来自专栏java一日一条

教你在Java接口中定义方法

接下来,SimpleTimeClient类实现了TimeClient接口,具体代码如下:

19020
来自专栏JavaEdge

HotSPot虚拟机对象探秘1 对象的创建过程2 对象的内存布局3 访问对象的过程

403160
来自专栏Java帮帮-微信公众号-技术文章全总结

【选择题】Java基础测试八(16道)

【选择题】Java基础测试八(16道) 101.下面哪个流类属于面向字符的输入流( D ) A)BufferedWriter ...

55360
来自专栏公众号_薛勤的博客

Java虚拟机性能监测工具Visual VM与OQL对象查询语言

Visual VM是一个功能强大的多合一故障诊断和性能监控的可视化工具,它集成了多种性能统计工具的功能,使用 Visual VM 可以代替jstat、jmap、...

30730
来自专栏java思维导图

HashMap为什么是线程不安全的?

一直以来只是知道HashMap是线程不安全的,但是到底HashMap为什么线程不安全,多线程并发的时候在什么情况下可能出现问题?

31620
来自专栏coolblog.xyz技术专栏

Dubbo 源码分析 - SPI 机制

SPI 全称为 Service Provider Interface,是 Java 提供的一种服务发现机制。SPI 的本质是将接口实现类的全限定名配置在文件中,...

9410

扫码关注云+社区

领取腾讯云代金券