sacss/less/SACSS.less

Static Atomic CSS, Rapidly build modern websites without ever leaving your HTML.

@charset "utf-8";
/**
 * #SACSS('', font-size; fs; 12, 16; 1px);
 * @prefix: 前缀
 * @prop: 属性名
 * @name: 缩写名
 * @list: 值列表
 * @unit: 单位换算表达式, 默认为1px, 想要 rem 填写 1/16*1rem
 */
#SACSS(@prefix; @prop; @name; @list; @unit) when not(@list = false) {
  @escapeProp: escape(@prop);
  @escapeName: escape(@name);
  .loop(@i) when (@i < length(@list) + 1) {
    @item: extract(@list, @i);
    @className: escape('@{prefix}@{name}@{item}');
    .@{className} {
      @{escapeProp}: @item * @unit;
    }
    .loop(@i+1);
  }

  .loop(1);
}

/**
 * #SACSS('', font-weight; fw; 400, 700);
 * @prefix: 前缀
 * @prop: 属性名
 * @name: 缩写名
 * @list: 值列表
 */
#SACSS(@prefix; @prop; @name; @list;) when not(@list =false) {
  @escapeProp: escape(@prop);
  @escapeName: escape(@name);
  .loop(@i) when (@i < length(@list) + 1) {
    @item: extract(@list, @i);
    @className: escape('@{prefix}@{name}@{item}');
    .@{className} {
      @{escapeProp}: @item;
    }
    .loop(@i+1);
  }
  .loop(1);
}