Less学习总结

76 阅读1分钟

标题:尚硅谷前端less教程_哔哩哔哩_bilibili

网址:www.bilibili.com/video/BV1YW…

Less入门

由于只用纯CSS很乱(不支持嵌套结构),因此会有less、sass等CSS预处理器。Less只能用于node的环境。

Less基本用法

image.png

image.png 也可以将选择器或属性名定义成变量(一般不怎么用) image.png 延迟加载(等块级作用域完成后确定变量值) image.png &表示平级,不加的话就变父子嵌套了,用于伪类或伪元素之中 image.png

Less混合与运算

混合必须用.来定义 image.png @w,@h,@c都是形参,调用时需要具体的参数(类似函数) image.png

image.png 默认参数在形参后面加一个: image.png 命名参数如图所示 image.png @_代表所有的匹配模式都会引用这个混合(这里其实还需要把@w,@c这些参数列表也带上)。匹配模式类似于重载。 image.png @import是引入其他css的方式 image.png arguments变量没啥用,但确实可以这样写 image.png less中可以加减乘除,并且只要一方有单位就可以了 image.png

Less继承

extend可以大大减少相同代码,相当于外面的选择器与继承中选择器的选择器组合,外部的子类选择器也会受继承中选择器的影响。“all”可以让继承中选择器的所有伪类等效果都继承。 image.png 继承的优先级更高,但没有混合更加灵活 image.png