less
关注
分享
扫一扫
无名之辈无名之辈
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
11_less中的条件判断
less中可以通过when混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码 when表达式中可以使用比较运算符(> < >= <= =),逻辑运算符,或检查函数来进行条件判断 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> .原创 2020-12-06 00:38:03 · 3336 阅读 · 0 评论 -
10_less中的继承
html: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2020-12-05 23:34:39 · 772 阅读 · 0 评论 -
9_less中的层级结构
如果在某一选择器的 {} 中直接写上了其他的选择器,会自动转换成后代选择器,如: .father{ .son{ } } 此时编译为css就是(好像这个有点废话了): .father .son{ } & 的作用是,告诉less在转换时,不要用后代来转换,直接拼接在当前选择器的后面即可 例如: .father { width: 300px; height: 300px; background: red; position: absolute; top: 5.原创 2020-12-05 23:34:05 · 668 阅读 · 0 评论 -
8_less中的内置函数
less中更支持一些js函数: 直接上html代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2020-12-05 23:33:31 · 413 阅读 · 0 评论 -
7_less中引入其他文件 / 模块
在less中引入(这玩意你可以引入文件名,加不加好慢的扩展名都可以,或者你直接引入要用的模块之类的): // 四种导入方式都可以 //@import "triangle.less"; //@import "triangle"; @import "09"; //@import "09.less"; div { .triangle(Down, 40px, red); } 输出: 我这里的目录结构: triangle这个东西在9.less中, 代码: .triangle(@_,@width,@colo原创 2020-12-05 23:31:53 · 793 阅读 · 0 评论 -
6_less中的匹配模式
如果利用div创建一个箭头: 它的HTML代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2020-12-05 23:30:41 · 842 阅读 · 0 评论 -
5_less中传入可变参数
先上效果图(最开始是宽高200px,红色,鼠标移上去,变为宽高400px,蓝色,0s延迟,持续4s): less如果不用可变参数的话: .animate(@name,@time,@mode,@delay) { transition: @name, @time, @mode, @delay; } div { width: 200px; height: 200px; background: red; .animate(all, 4s, linear, 0s); } 在 () 写的东西原创 2020-12-05 23:29:56 · 2819 阅读 · 0 评论 -
4_less中带参数混合
less中你可以定义一些形参,将数值传入形参, 然后再将形参赋予给某一元素(就是利用形参为该元素添加属性) 如: // 创建一个形参 .whc(@w:,@h:,@c) { width: @w; height: @h; background: @c; } .div1 { //width: 200px; //height: 200px; //background: red; //下面一行就相当于上面三行的代码 .whc(200px, 200px, red); } 也可以使用带默认原创 2020-12-05 23:28:37 · 216 阅读 · 0 评论 -
3_less混和(使用类来混合)
less支持混合 什么是less混合? 将需要重复使用的代码封装到一个类中,在需要的地方调用封装好的类即可, 在预处理的时候,less会自动将用到的封装好的类中的代码拷贝进来 本质就是ctrl+c --> Ctrl+v html代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" conten.原创 2020-12-05 23:27:40 · 564 阅读 · 0 评论 -
2_less中的数值运算
less中可以进行一些新增css3中的运算 html: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam..原创 2020-12-05 23:26:24 · 813 阅读 · 0 评论 -
1_初识less&引用&变量&作用域&变量差值
之前直接上手了一些项目,接触到了less,用起来简单又方便(比CSS香多了), 之后就想学习一下less,最近学了下,顺便也积累了写,就写个less的小结(此小结偏向于实践) less中文网 less简介:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量,Mixin,函数等特性,使 CSS 更易维护和扩展.Less 可以运行在 Node 或浏览器端 常见的css预处理器:Less,Sass,Stylus less编译为css: 考拉客户端 在线编译 这种网站原创 2020-12-05 23:24:21 · 668 阅读 · 0 评论