工作中常用Less知识点实践总结

2022-04-27 00:32:02 阅读：206 来源： 互联网

标签：总结知识点 Less color 50% width border transparent

我所理解的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~

标签：总结,知识点,Less,color,50%,width,border,transparent
来源： https://www.cnblogs.com/fx67ll/p/less-in-work.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9