乐趣区

关于css3:工作中常用Less知识点实践总结

jiezi

我所了解的 Less 的一些益处

  1. 函数式编程 css
  2. 自定义变量用于整体主题调整
  3. 嵌套语法简化开发复杂度

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~ :)
转发请注明参考文章地址，非常感谢！！！

退出移动版