摘要: 1. 内置数学函数 基本使用 @width: ceil(10.001); .box{ width: @width; height: @width; background-color: red; } ceil方法表示向上取整 函数以及描述 实例 结果 ceil向上取整 ceil(10.001) 11 阅读全文
posted @ 2021-10-31 22:39 keyeking 阅读(111) 评论(0) 推荐(0) 编辑
摘要: less提供了两种方式对css的属性进行合并,一种方式是用逗号隔开,一种方式是空格隔开,这两种方式也是遵循css的多个参数的语法规范 之前我们使用合并的方法 .mixin() { padding: 10px; } .box{ .mixin; width: 200px; height: 200px; 阅读全文
posted @ 2021-10-31 22:11 keyeking 阅读(186) 评论(0) 推荐(0) 编辑
摘要: Guard翻译过来就是守卫的意思,在less中的作用就是给less的属性添加判断条件 less除了基本的计算还可以进行逻辑判断 使用when关键字来表示判断条件加载的逻辑,后面是判断条件依据 基本使用 .mixin(@width,@height) when (@width >= 100) { wid 阅读全文
posted @ 2021-10-31 21:53 keyeking 阅读(52) 评论(0) 推荐(0) 编辑
摘要: 基本使用 使用@import命令来进行导入 如果使用@import进行导入的时候,取决于不同的文件扩展名 基本使用 index.html <div class="box"> 123456789 </div> index.less @import "a"; @import "a.css"; .box{ 阅读全文
posted @ 2021-10-31 21:31 keyeking 阅读(1305) 评论(0) 推荐(0) 编辑
摘要: Extend是Less的伪类,它通过:extend选择器来获取另一个选择器的内容 <div class="box"></div> <div class="box2"></div> .box{ height: 200px; background: red; } .box2{ width: 200px; 阅读全文
posted @ 2021-10-31 20:33 keyeking 阅读(73) 评论(0) 推荐(0) 编辑
摘要: 转义就是将浏览器不识别的带字符串的变量转义成不带字符串的浏览器识别的变量 案例: @bgc: "red"; .box{ width: 100px; height: 100px; margin-top: 10px; background-color: @bgc; } 在css中编译后的结果为: 上图中 阅读全文
posted @ 2021-10-31 20:10 keyeking 阅读(63) 评论(0) 推荐(0) 编辑
摘要: 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。算术运算符在加、减或比较之前会进行单位换算 作加法时,可以进行单位的转换 @width: 10cm; @height: @width + 2cm; .box{ width: @width; height: @height; backgr 阅读全文
posted @ 2021-10-31 17:35 keyeking 阅读(80) 评论(0) 推荐(0) 编辑
摘要: CSS预处理语言最大的魅力之一就是无限的嵌套 Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力 index.html <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> 三个 阅读全文
posted @ 2021-10-31 17:07 keyeking 阅读(92) 评论(0) 推荐(0) 编辑