css预处理器
「已注销」
这个作者很懒,什么都没留下…
展开
-
Less-内置函数
Less-内置函数混杂方法单位转换列表数学字符串判断类型颜色操作颜色混合混杂方法image-size("file.jpg"); // => 100px 50pximage-width("file.jpg"); // => 100pximage-height("file.jpg"); // => 50px单位转换convert(9s, "ms"); // =>...原创 2019-10-06 16:58:54 · 452 阅读 · 0 评论 -
Less-继承
less中的继承和less中混合的区别使用时的语法格式不同 (选择器:extend(混合))转换之后的结果不同(混合是直接拷贝, 继承是并集选择器).center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}.father:extend(.center){ ...原创 2019-10-06 17:37:47 · 698 阅读 · 0 评论 -
Less-层级结构
如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器例如以下代码: .box1 .son&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可.box1 { width: 400px; height: 300px; position: relative; background-color: p...原创 2019-10-06 17:35:50 · 1764 阅读 · 0 评论 -
Less-less导入其他less文件
@import "triangle.less";// .less可省略@import "triangle.less";原创 2019-10-06 17:30:12 · 3467 阅读 · 1 评论 -
Less-混合的匹配模式
混合的匹配模式就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合通用的匹配模式无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码@_: 表示通用的匹配模式.triangle(@_, @width, @color) { width: 0; height: 0; border-style: solid;}.triangle(Bottom, @width...原创 2019-10-06 17:28:20 · 459 阅读 · 0 评论 -
Less-混合
混合将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来本质就是ctrl+c --> ctrl + v注意点如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码.center(){ position: abs...原创 2019-10-06 17:24:25 · 127 阅读 · 0 评论 -
Less-运算
less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算, 至少要有一个带单位=div{ width: 200px; height: 200px; background: blue; position: absolute; left: 50%; // margin-left: (-200px * 0.5); // margin-left: (-...原创 2019-10-06 17:14:19 · 132 阅读 · 0 评论 -
Less-变量差值
变量插值在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式变量插值的格式格式: @{变量名称}@size: 200px;@w: width;@s: div;@{s}{ @{w}: @size; height: @size; background...原创 2019-10-06 17:11:18 · 164 阅读 · 0 评论 -
Less-变量
变量和js中的概念基本一样less中定义变量的格式@变量名称: 值;less中使用变量的格式==@变量名称;=@w: 400px;@h: 200px;将一个变量赋值给另外一个变量@变量名称 : @变量名称;@h: @w;全局变量和局部变量定义在=={}外面的就是全局变量==, 什么地方都可以使用定义在=={}里面的就是局部变量==, 只能在{}中使用注意: less中的...原创 2019-10-06 17:07:39 · 442 阅读 · 0 评论 -
Less-条件判断
less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合的代码when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进条件判断(),()相当于JS中的||/* 当下边 div 中 .size 传入的第一个参数是100px或者第二个参数是100px才会执行*/.size(@width,@height) w...原创 2019-10-06 17:42:41 · 9627 阅读 · 0 评论