less方法

less

参考

  • [x] misc方法

    • [ ] data-uri：: LESS支持把图片转换成BASE64编码（仅支持小图）
    • 传统加载图片：浏览器请求图片，服务器返回图片，浏览器渲染图片（减少请求用时：延迟加载）
    • BASE64编码：无需请求图片，浏览器直接渲染图片（尤其移动端项目, 节省图片加载时间）
      • 项目中慎用BASE64,部分大图实可用BASE64;工具 
        1
        2
        3
        4
        5
        6
        7
        @color: '#000';
        @url: 'img/swiper';
        .box {
            background: color(@color);//字符转化为可识别颜色
            @v:data-uri('@{url}/text1.png');
            background: @v no-repeat;
        }
- [ ]  unit 

1
2
3
4
5
 @width:100px;
.box{
  width:@width+50;//有单位时+可以，-出错
  width:unit(unit(@width)-50,px);
}
  • [x] List函数
    • [ ] length
      1
      2
      3
      4
      5
      6
      7
         @color: #000, #bbb, #eee, #fff; 
      .box{
        z-index:length(@color);//长度
      }
      // 结果
      .box{z-index:4}
- [ ]  extract

1
2
3
4
5
6
7
    @color: #000, #bbb, #eee, #fff; 
.box{ 
  background: extract(@color,length(@color));//提取最后一个
}
// 结果
.box{background:#fff}
  • [x] Math方法:不需加前缀Math.
    • [ ] ceil、floor、percentage、round、
    • [ ] sqrt、abs、pi、pow(A的B次方) mod(A对B取余)、min、max
    • [ ] sin、asin、cos、acos、tan、atan、
  • [x] color的方法
    • [ ] rgb(@red,@green,@blue) rgba
    • [ ] hsl(@hue色相，饱和度 (saturation)，亮度 (lightness)) hsla 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
          @color:"#ccc";
      .box {
          width: 100px;
          height: 100px;
          background:argb(rgba(12,34,56,0.7));
          &:hover {
              background: darken(color(@color), 5%);
          }
      }
      // 结果
      .box {
          width: 100px;
          height: 100px;
          background: #b30c2238
      }
      .box:hover {
          background: #bfbfbf
      }
- [ ]  saturate(@value,20%) 增加饱和度
    desaturate 降低饱和度
    lighten 增加亮度
    darken 降低亮度

- [ ] fadein 增加透明度
    fadeout 降低透明度
    fade 设置透明度
    greyscale 完全移除饱和度 灰度