magic-page-designer/src/assets/layout/color-layout.less

magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w

// 定义生成的方法
.color-define-all(@attr) {
  // 黑色
  &-black {
    @{attr}: #000000;
  }
  // 白色
  &-white {
    @{attr}: #ffffff;
  }
  // 灰色
  &-gray {
    @{attr}: rgba(0, 0, 0, 0.25);
  }
  // 粉色
  &-pink {
    @{attr}: #c41d7f;
    &-thin {
      @{attr}: #ffadd2;
    }
    &-light {
      @{attr}: #fff0f6;
    }
  }
  // 红色
  &-red {
    @{attr}: #ff4d4f;
    &-thin {
      @{attr}: #ffa39e;
    }
    &-light {
      @{attr}: #fff1f0;
    }
  }
  // 橘色
  &-orange {
    @{attr}: #d46b08;
    &-thin {
      @{attr}: #ffd591;
    }
    &-light {
      @{attr}: #fff7e6;
    }
  }
  // 绿色
  &-green {
    @{attr}: #389e0d;
    &-thin {
      @{attr}: #b7eb8f;
    }
    &-light {
      @{attr}: #f6ffed;
    }
  }
  // 青色
  &-cyan {
    @{attr}: #08979c;
    &-thin {
      @{attr}: #87e8de;
    }
    &-light {
      @{attr}: #e6fffb;
    }
  }
  // 蓝色
  &-blue {
    @{attr}: #096dd9;
    &-thin {
      @{attr}: #91d5ff;
    }
    &-light {
      @{attr}: #e6f7ff;
    }
  }
  // 绿色
  &-purple {
    @{attr}: #531dab;
    &-thin {
      @{attr}: #d3adf7;
    }
    &-light {
      @{attr}: #f9f0ff;
    }
  }
}
// 背景颜色
.bg-color {
  .color-define-all(background-color);
}
// 字体颜色
.text-color {
  .color-define-all(color);
}
// 边框颜色
.border-color {
  .color-define-all(border-color);
}