Usage
常用的 CSS 工具类库
** NPM **
npm install --save css-comm-utils
使用 your .scss
file
;
如果需要覆盖默认的设置
;;
your variable.scss
$
详细用法
颜色
颜色区分 字体颜色
和 背景色
primary: #4285f4 !default;
danger: #f04141 !default;
warn: #f85 !default;
success: #51c43f !default;
dark: #262626 !default;
light: #f4f5f8 !default;
white: #fff !default;
深色 , 原来的基础上 darken($color-primary, $darken-num)
$darken-num: 6% !default;
浅色, 原来的基础上 lighten($color-dark, $lighten-num)
$lighten-num: 6% !default;
字体颜色定义方式:
primary
primary 颜色字体,
primary-d
深色的 primary 字体颜色
primary-l
浅色的 primary 字体颜色
primary-bg
primary 颜色背景色,
primary-bgd
深色的 primary 背景色
primary-bgl
浅色的 primary 背景色
同理 danger
,warn
,success
,dark
, light
唯一区别 white
white 只有 white-bg
, white-bgd
,white
, white-d
基础字体颜色:
- tx-pc
主要文字颜色
- tx-rc
常规文字 regular
- tx-sc
次要文字 secondary
- tx-hc
占位文字 placeholder
布局系统
项目提供了常见的布局 方案 flex
, 文本布局
, 定位
, 清除浮动
, 滚动
/********************** display: flex **********************/.fbox // 垂直方向 .fbox-h // 垂直居中 .fbox-vc // 水平垂直居中 .fbox-hvc // 垂直方向 .fbox-v // 垂直 垂直居中 .fbox-v-vc // 垂直 垂直水平居中 .fbox-v-vhc .flex-vc .flex-hc .flex-hvc .flex-wrap // between .flex-hb // around .flex-ha // end .flex-he // align-items: flex-start; .flex-vs .flex-ve // stretch .flex-vt // align-self .self-start .self-end .flex /********************** block **********************/.block-center .inblock .block .hide /********************** 清除浮动 **********************/.clearfix:after /********************** overflow **********************/.over-hi .over-hiy .over-hix .over-auto .over-sy .over-sx .over-smooth .pointer /********************** 定位 **********************/.posi-re // 绝对 .posi-ab // fixed .posi-fx /*static*/.posi-st /*固定定位*/.posi-sk /********************** 定位居中 **********************/.posi-hc .posi-vc .posi-hvc /********************** background-size **********************/.bg-sico .bg-sict /********************** visibility **********************/.visi-hide,.invisi .visi /********************** 响应式 **********************/
定义方式
v
前缀的代表垂直方向, h
表示水平方向
字体大小
项目提供了 font-size
从
;;
会生成 fs8, fs9, fs10 , ... , fs30 的 font-size
类
如果要设置 css font-size:10px
只需 fs10
border
间距
项目提供了 padding 和 margin 两个常用间距设置
上面的会生成 如 @include gap('2', 2px);