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;