wusd-scss v1.0.18

wusd-scss

wusd-scss is a collection of SCSS Mixind and functions.

Getting start

npm install wusd-scss --save

Webpack

webpack scss loader option

{
  loader: 'sass-loader',
  options: {
    additionalData: `@import "wusd-scss";`
  },
}

install

Import scss to your core

Example:

@import 'wusd-scss';

Document

vars

Mixins

mixins methods

btn

code	preview
@include btn((type: primary));
@include btn((type: info));
@include btn((type: success));
@include btn((type: warning));
@include btn((type: danger));
@include btn((type: primary, plain: true));

options:

btn_press

@include btn_press();

card

code	preview
@include card((radius: 10px))

options:

clearfix

Clear float box

@include clearfix;

cut_txt

code	preview
@include cut_txt(1);
@include cut_txt(2);

options:

cell

<div class="cell">
    <div>label:</div>
	<div>value</div>
</div>

code	preview
@include cell((label_width: 80%))

options:

form_item

<div class="form_item_panel">
  <div>userName: </div>
  <div><input type="text" /></div>
  <div class="icon">!</div>
</div>

code	preview
@include form_item((label_width: 120px));

options:

flex

code	preview
@include flex((x: center, y: center));

options:

flex_self

@include flex_self((grow: 1));

safe_area_bottom

Adaptation of iPhone x Bang screen

@include safe_area_bottom;

safe_area_top

Adaptation of iPhone x home btn

@include safe_area_top;

un_select

prohibit select

@include un_select;