less初探
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 使用 @ 定义变量 变量可以做运算 @color : #000; @width : 1000px; 使用 & 表示当前类 .box{ &:hover{ color : #000; } } css 可以嵌套 ul{ display : block; li{ float : left; a{ font-size : 18px; } } } 继承 : 直接在需要的地方引用 class或者 id 类 .clearfix{ zoom : 1; display : block; &:after{ content: ""; visibility: hidden; clear: both; height: 0; display: block; } } .radius(@radius : 15px){ border-radius: @radius; } .box{ .clearfix; .radius(10px); } 混合 : 类似 js 中的函数, [或者叫继承] .layout(){ ... } 作用域 : 限制继承的条件,可以继承一个 类的部分内容 延伸 : &:extend(.box); 括号中可以填写多个 类名 编译后的效果就是 css 中的分组 when 用来做条件判断 when not 不等于 /* 使用 isnumber 来判断某个参数是否为 数字 * */ .border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){ border: @width @style @color; } /* 使用 iscolor 来判断某个参数是否为 颜色 * */ .border(@color) when (iscolor(@color)){ .border(1px , solid , @color); } .border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){ .border(1px , @solid); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 个人数据保全计划:从印象笔记迁移到joplin
· Vue3.5常用特性整理
· 重拾 SSH:从基础到安全加固
· 并发编程 - 线程同步(一)