less讲解
关注
分享
扫一扫
终于懂了!!!
贵哥的编程之路(热爱分享)
我是陈业贵。择一业，终二十年。子幼，看父敬子 子行 看子敬父。以后靠我了[呲牙][呲牙]。父母老了
展开
-
LESS第七课(条件判断)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码 when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断 */原创 2020-07-23 23:07:41 · 1078 阅读 · 0 评论 -
LESS第六课(内置函数 层级结构 继承()注意是extend，不是extends)
/* 由于less的底层就是用JavaScript实现的, 所以JavaScript中常用的一些函数在less中都支持 */ 不想介绍，因为太他妈多了。。。。 //层级结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*在哪里加&,代表了它以及上级都不是后原创 2020-07-23 00:17:34 · 427 阅读 · 0 评论 -
LESS第五课（匹配模式 导入其他的less文件）
//记住，@_一定会被执行，第一开始执行的，然后是执行应该执行的啊 就是通过混合的((第一个字符串形参)),来确定具体要执行哪一个同名混合 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*@_:代表通用的匹配模式. 什么是通用的匹配模式？ 他的优先级最高的,如果同原创 2020-07-22 23:37:36 · 549 阅读 · 2 评论 -
LESS第四课（带参数的混合)
带参数的混合: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*.animate(@name,@time,@mode,@delay) { transition: @arguments;/*这个像是@name,@time,@mode,@delay*/ }原创 2020-07-21 00:48:31 · 486 阅读 · 0 评论 -
LESS第三课
less的混合： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*混合名称的核心是:是定义一个名称,名称里面是双方都具备的代码 注意一下:如果加括号代码 */ /*.center { position: ab原创 2020-07-20 00:51:30 · 396 阅读 · 0 评论 -
LESS第二课
变量插值： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*@size:200px; @w:width; @s:div; @{s} { @{w}:@size; height:@size; background:red;原创 2020-07-20 00:23:31 · 375 阅读 · 0 评论 -
LESS第一课
less是什么? css预处理器。升级版的css。 有什么优点？ 赋予了动态语言需要具备的变量函数if for之类的把。 那怎么使用运行less代码啊? 第一： 先引入less.css与less.js运行，然后是要预编译。 在那里预编译？ 记住哈，编译之前是先.less文件的。 然后编译后改成.css文件哈(考拉软件是识别less文件的哈，编译转换成css文件就行了哈。) 开源中国 : https://tool.oschina.net/less 这个网站上编译。 或者是在下载考拉软件来编译哈. 考拉客户端原创 2020-07-14 23:54:30 · 476 阅读 · 0 评论