我所了解的Less的一些益处
- 函数式编程css
- 自定义变量用于整体主题调整
- 嵌套语法简化开发复杂度
mixin的写法
.defaultBorder(@width: 10px, @style: solid, @color: red){ border: @width @style @color;}when条件判断函数
.area(@width) when(@width <= 200px){ width: @width; background-color: yellow;}@media screen and (max-width: 200px){ .when{ .area(100px); }}@media screen and (min-width: 201px){ .when{ .area(210px); }}loop循环函数
.widthFun(100);.widthFun(@n, @i:10) when (@i <= @n){ width-@{i}{ width: (@i * 100% / @n); } .widthFun(@n,(@i+10))}// 下面这段loop编程成css:width-10 { ·width: 10%;}width-20 { ·width: 20%;}width-30 { ·width: 30%;}width-40 { ·width: 40%;}width-50 { ·width: 50%;}width-60 { ·width: 60%;}width-70 { ·width: 70%;}width-80 { ·width: 80%;}width-90 { ·width: 90%;}width-100 { ·width: 100%;}罕用的数值计算函数
// unit()对数值连贯单位/去除单位width: unit(@num, px);// round()对数值四舍五入取整数width: round(@num);// ceil()对数值向下取整数width: ceil(@num);// floor()对数值向上取整数width: floor(@num);// percentage()把小数转化为百分比width: percentage(@num);// abs()对数值取绝对值width: unit(abs(@num));// lighten()色彩提亮color: lighten(@color, 10%);// darken()色彩变暗background-color: darken(@bgColor, 20%);Less的匹配模式（相似于函数重载）
// 示例：方向不同的款式三角形.sanjiao(down ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: @c transparent transparent transparent; border-style: solid;}.sanjiao(top ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: transparent transparent @c transparent; border-style: solid;}.sanjiao(left ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: transparent @c transparent transparent; border-style: solid;}.sanjiao(right ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: transparent transparent transparent @c ; border-style: solid;}#tranigle{ width: 0; height: 0; overflow: hidden; .sanjiao(right)}Less中的论据
间接应用函数默认数值
.border(@s: solid, @c :#ff6600, @h:10px){ border: @arguments;}Less中免编译
具体的应用场景就是calc在less中的应用，calc在scss中能够依照css的款式间接去写
.width{ // css3中的计算属性 calc width: calc(300px * 0.3); // ~'XXX'批示less不要编译XXX而是间接把XXX写入css文件中 width: ~'calc(300px * 0.3)'; }Less中的!important
.sss{ width: 100px; height: 100px; border: 10px;}.box{ // 编译成css后，每个.sss中的属性前面都加上了 !important .sss !important; }Less中的其余函数
能够参考官网的文档具体学习
Less在理论利用中的注意事项
Less中运算符号都会被计算，应用属性一些非凡值的时候会呈现一些问题
这个示例是在做egg形态的时候须要用到的属性，如果间接应用/会导致50% / 60% 被计算成为0.8333333%显示在款式中，这样就会呈现问题，
所以须要应用本义符来保障这个属性的值原样输入，一开始做的时候没有留神到这点，搜寻less本义符，
看到这个介绍才反馈过去
// border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;border-radius: ~"50% 50% 50% 50% / 60% 60% 40% 40%";Less在Vue中应用的时候须要在main.js中注册，Sass不必
我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文github仓库地址，为我点一颗Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！