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

Property	Default	Descript
$color	#6634E2
$color_plain	#f6f2ff
$color_primary	#6634E2
$color_success	#67C23A
$color_success_plain	#e1f3d8
$color_warning	#E6A23C
$color_warning_plain	#faecd8
$color_danger	#F56C6C
$color_danger_plain	#fde2e2
$color_info	#909399
$color_info_plain	#e9e9eb
$default_btn_circle	false	btn circle (values: false, true)
$default_btn_radius	6px	btn radius
$default_card_shadow	1px 1px 5px 5px #f1f1f1	card shadow
$default_card_radius	12px	card radius
$default_card_padding	10px	card padding
$default_card_bgc	#fff	card background color
$default_form_item_label_width	80px	form item label width

---

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:

Property	Descript	Default	type	Allow
type	color styles	primary	string	primary, success, warning, danger, info
radius	button radius	6px	pixel
plain	plain btn	false	boolean
inline	inline box	false	boolean

---

btn_press

@include btn_press();

Property	Descript	Default	type	Allow
ele	pseudo elements type	after	string	after, before
press_color	mask color	#ffffff	color
opacity	press opacity	0.3	number

---

card

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

options:

Property	Descript	Default	type
radius	card radius	12px	pixel
padding	box padding	10px	pixel

---

clearfix

Clear float box

@include clearfix;

---

cut_txt

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

options:

Property	Descript	Default	type
line	show ellipsis when overflow	1	number

---

cell

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

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

options:

Property	Descript	Default	type
label_width	label width	80px	pixel

---

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:

Property	Descript	Default	type
label_width	label width	80px	pixel
align	value dom text align	left	string
icon_width	icon width	20px	pixel

---

flex

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

options:

Property	Descript	Default	type	Allow
x	justify-content	left	string	start, end, left, right, center, between, around, evenly
y	align-items	top	string	start, end, top, center, bottom
dir	flex-direction	x	string	x, y, rx, rystart, end,
wrap	flex-wrap	none	string	wrap
inline	inline flex	false	boolean	true, false

---

flex_self

@include flex_self((grow: 1));

Property	Descript	Default
grow	flex-grow	none
shrink	flex-shrink	none
basis	flex-basis	none

---

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;