Reducss NPM | npm.io

reducss（reduce css）

兼容各平台的精简 css 库，采用 scss 语言；让你写更少的 css，更专注于处理业务逻辑

安装使用

安装

npm install reducss

main.js 中引入

import "reducss"

使用

示例

<div class="mt-10 pd-10 radius-20 fs-20 fw-bold"></div>

可用项

flex: flex-xx
- flex-row: flex-direction: row;
- flex-column: flex-direction: column;
- flex-mid: align-items: center;
- flex-center: justify-content: center;
- flex-between: justify-content: space-between;
- flex-around: justify-content: space-around;
- flex-grow-1: flex-grow: 1;
- flex-grow-0: flex-grow: 0;
- flex-shrink-1: flex-shrink: 1;
- flex-shrink-0: flex-shrink: 0;
width: w-xx 额外的值（p 是 percent 的缩写）
- w-50p：border-radius: 50%
height: h-xx 额外的值（p 是 percent 的缩写）
- h-10p：border-radius: 100%
top,right,bottom,left: t-xx r-xx b-xx l-xx
margin: mg-x mt-x mr-x mb-x ml-x mlr-x mtb-x
padding: pd-x pt-x pr-r pb-x pl-x plr-x ptb-x
radius: radius-x 会自动添加overflow: hidden 额外的值（p 是 percent 的缩写）
- radius-50p：border-radius: 50%
- radius-10p：border-radius: 100%
fontSize: fs-x
fontWight: fw-x
position: 直接使用static relative absolute sticky fixed inline inline-block

自定义变量

在项目全局定义以下 scss 变量即可覆盖封装的值（内部会按如下变量循环，需要列出所有你使用的值），修改值可能需要重启才能生效以下为封装的所有原始可用值

$suffix: "px" !default; // 尺寸的单位,可替换为em rem rpx

$ratio: 1 !default; // 单位换算比例

$widthHeightSize: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40 !default;

$marginSize: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40 !default;

$paddingSize: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40 !default;

$distance: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40 !default; // top,right,bottom,left

$radiusSize: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40 !default;

$fontSize: 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30 !default;

$fontWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, thin, lighter, light, normal, medium, bold, bolder !default;