forever-z-133 / common-less-mixin Goto Github PK

// xxx.less
@import '~common-less-mixin';

.someClass {
  .pos-top(); /* 顶部定位 */
  .flex-row(); /* flex 行且水平居中 */
  .padding-row(); /* 两边加上 15px 的内边距 */
  .child-gap-right(); /* 子元素之间距离为 5px */
  .border-bottom(); /* 底部毛细线 */
}

// 也有打包好的 css 可供使用，但类名会有所不同
// 如果喜欢本项目的话，可通过源码进一步尝试
@import '~common-less-mixin/dist.min.css';

// 如果担心编译太多 mixin 会影响性能，可分别引入
@import '~common-less-mixin/src/border.scss';
@import '~common-less-mixin/src/flex.scss';
@import '~common-less-mixin/src/form.scss';
@import '~common-less-mixin/src/gap.scss';
@import '~common-less-mixin/src/layout.scss';
@import '~common-less-mixin/src/others.scss';
@import '~common-less-mixin/src/position.scss';
@import '~common-less-mixin/src/text.scss';
@import '~common-less-mixin/src/utils.scss';
@import '~common-less-mixin/src/var.scss';

// 单个 css 则可以自己打包
@import '~common-less-mixin/src/flex.scss';
@import '~common-less-mixin/src/gap.scss';
.flex-build();
.gap-build();

// common.less
@import '~common-less-mixin';
@px: 1rem;

// 使用时
@import 'common.less';

@px: 1px;

@gap-xs: 5 * @px;
@gap-sm: 10 * @px;
@gap-md: 15 * @px;
@gap-xl: 30 * @px;
@row-gap: @gap-md;
@child-gap: @gap-xs;

@radius-md: 4 * @px;
@radius-round: 1000em;
@radius-circle: 50%;

@border-width: 1PX;
@border-color: #e8e8e8;

// 当在小程序上使用时不支持 > :not() 和 *，故而可通过以下配置改为 view
@flex-grow-children: ~'.grow';
@flex-shrink-children: ~'';
@flex-column-grow-children: ~'.item', ~'.col';
@float-row-children: ~'*';
@inblock-row-children: ~'*';
@child-gap-children: ~'';
@child-gap-children-not: ~':last-child';
@input-file-children: ~'[type="file"]';
@image-ratio-children: ~'*';

/* border.scss */
.border(@color, @width);
.border-top(@color, @width);
.border-left(@color, @width);
.border-right(@color, @width);
.border-bottom(@color, @width);
.raduis(@rdius, @overflow);
.radius-round(@overflow);
.radius-circle(@overflow);

/* gap.scss */
.padding-row(@gap);
.padding-col(@gap);
.margin-row(@gap);
.margin-col(@gap);
.margin-center();
.child-gap-right(@gap);
.child-gap-bottom(@gap);

/* flex.scss */
.flex-row-normal();
.flex-row(@children);
.flex-row-top();
.flex-row-middle();
.flex-row-bottom();
.flex-row-stretch();
.flex-row-left();
.flex-row-center();
.flex-row-right();
.flex-row-space();
.flex-row-wrap();

.flex-col-normal();
.flex-col(@children);
.flex-col-top();
.flex-col-middle();
.flex-col-bottom();
.flex-col-space();
.flex-col-left();
.flex-col-center();
.flex-col-right();

.flex-center();
.flex-column(@column, @children);

/* layout.scss */
.inblock-row();
.float-row();
.scroller(@dir);
.scroller-x();
.scroller-y();

/* form.scss */
.input-file(@children);
.pure();

/* position.scss */
.cover(@type);
.fit-cover(@fit);
.pos-center(@type);
.pos-top(@type);
.pos-bottom(@type);
.pos-left(@type);
.pos-right(@type);
.pos-top-left(@type, @offset);
.pos-top-right(@type, @offset);
.pos-bottom-left(@type, @offset);
.pos-bottom-right(@type, @offset);
.pos-hide();

/* text.scss */
.text-overflow(@line);
.text-last-justify(@height);

/* others.scss */
.reset();
.normal-list();
.clearfix();
.rect-box(@size);
.disabled(@grey);
.ratio(@ratio);
.image-ratio(@ratio, @fit, @children);
.seo-only();