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 · 3046 阅读 · 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 · 676 阅读 · 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 · 528 阅读 · 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 · 293 阅读 · 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 · 686 阅读 · 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 · 737 阅读 · 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 · 2426 阅读 · 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 · 151 阅读 · 0 评论 -
3_less混和(使用类来混合)
less支持混合什么是less混合?将需要重复使用的代码封装到一个类中,在需要的地方调用封装好的类即可,在预处理的时候,less会自动将用到的封装好的类中的代码拷贝进来本质就是ctrl+c --> Ctrl+vhtml代码:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="renderer" conten.原创 2020-12-05 23:27:40 · 474 阅读 · 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 · 709 阅读 · 0 评论 -
1_初识less&引用&变量&作用域&变量差值
之前直接上手了一些项目,接触到了less,用起来简单又方便(比CSS香多了), 之后就想学习一下less,最近学了下,顺便也积累了写,就写个less的小结(此小结偏向于实践)less中文网less简介:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量,Mixin,函数等特性,使 CSS 更易维护和扩展.Less 可以运行在 Node 或浏览器端常见的css预处理器:Less,Sass,Stylusless编译为css:考拉客户端在线编译 这种网站原创 2020-12-05 23:24:21 · 555 阅读 · 0 评论