©2010-2024


鲁公网安备
37131202371784号

不一样的Less

enozoomstudio
/
技术笔记
/
不一样的Less

我想如果用Less，肯定不是为了少些点css这么简单吧，毕竟Less最终转成的css代码冗余很高，所以我们来点不一样的。 

/*
说明：文字方向 
例子：.align{ .__align(center);.__align(left);.__align(right); }
结果：.align.center{text-align:center}.align.left{text-align:left}.align.right{text-align:right}
*/
.__align(@direction){
  &.@{direction}{text-align: @direction}
}

/*
说明：颜色
例子：.color{  .__color;  }
结果：.color.red{color:#c62828}.color.green{color:#4caf50}.color.blue{color:#2196f3}
.color.cyan{color:#00bcd4}.color.teal{color:#009688}.color.orange{color:#ff9800}
.color.amber{color:#ffc107}.color.yellow{color:#ffeb3b}.color.grey{color:#9e9e9e}
.color.white{color:#fff}.color.bg.gray{background-color:#f4f4f4}
*/
@red: #c62828;
@green: #4caf50;
@blue: #2196f3;
@cyan: #00bcd4;
@teal: #009688;
@orange: #ff9800;
@amber: #ffc107;
@yellow: #ffeb3b;
@grey: #9e9e9e;
@white: #fff;
@transparent: transparent;
.__color(){
  @names: red green blue cyan teal orange amber yellow gray white;
  .color(@i) when (@i > 0) {
    .color(@i - 1);
    @var:extract(@names, @i);
    &.@{var}{color:@@var}
  }
  .color(length(@names));
}

/*
说明：边框
例子：a{ .__border(top,#ddd) }
结果：a{ border-top:1px dashed #ddd; }
例子：a{ .__border(bottom,#ccc,solid,1em) }
结果：a{ border-bottom:1em solid #ccc; }
*/
.__border(@position; @color; @style: dashed; @strength: 1px){
  border-@{position}: @strength @style @color;
}

/*
说明：定位
例子：nav{ .__position; }
结果：nav{ position:relative; }
例子：nav{ .__position(3) }
结果：nav{ position:fixed; }
例子：nav{ .__position(3,0) }
结果：nav{ position:fixed;left:0; }
例子：nav{ .__position(3,0,0) }
结果：nav{ position:fixed;left:0;top:0; }
例子：nav{ .__position(3,0,0,-1,-1,100%) }
结果：nav{ position:fixed; left:0;top:0;width:100%}
例子：nav{ .__position(3,0,0,0,0) }
结果：nav{ position:fixed;left:0;top:0;right:0;bottom:0; }
*/
.__position(@i:1, @rest...){
  position:extract(relative absolute fixed,@i);
  @len: length(@rest);
  & when (@len >= 1) {
    @left: extract(@rest,1);
    & when (@left > -1) { left:@left; }
    @top: extract(@rest,2);
    & when (@top > -1) { top:@top; }
    @right: extract(@rest,3);
    & when (@right > -1) { right:@right; }
    @bottom: extract(@rest,4);
    & when (@bottom > -1) { bottom:@bottom; }
    & when (@len = 5) { width:extract(@rest,5); }
  }
}

/* 不生成css,作为参数备用 */
.mod() { padding:25rpx;}
.flex() { display: flex;align-items: center;.__position;}
.block() { display:block;}

JOE