SLCSS

这是一个css集合，适用于所有基于 node-sass、less 打包的项目。

1、在SCSS文件中使用

首先向 node-sass 添加 includePaths。

// node_modules 在磁盘中的完整路径
includePaths: [path.join(__dirname, 'xxxx', 'node_modules')]

引用：

@import 'slcss/scss/index'; // 原子基类
@import 'slcss/scss/reset/index';
@import 'slcss/scss/pc-scrollBar/index';

Ps：若打包工具使用 webpack 可跳过上一步。

2、在LESS文件中使用

@import 'slcss/less/index';
@import 'slcss/less/reset/index';
@import 'slcss/less/pc-scrollBar/index';

3、在 js 文件中使用

import 'slcss'
import 'slcss/css/reset/index.css'
import 'slcss/css/pc-scrollBar/index.css'

4、在 wepy 项目中使用

需要设计稿以 iphone6 为基准才可使用。

首先向 node-sass 添加 includePaths。

// node_modules 在磁盘中的完整路径
includePaths: [path.join(__dirname, 'xxxx', 'node_modules')]

引用：

@import 'slcss/scss/mp/index';
@import 'slcss/scss/mp-hover/index';
@include hover-color('#F8F8F8');

样式对照表

类名	说明
.tc, .tl, .tr, .tj	text-align 相关
.ov-a, .ov-h, .ov-s	overflow 相关
.o-0, .o-05, .o-10 ~ .o-100	opacity 相关， 10 ~ 100 之间 10 的倍数
.dn, .di, .db, .df, .dib, .dit, .dt, .dtc, .dt-row	display 相关
.ws-normal, .nowrap, .pre	white-space 相关
.strike, .underline, .no-underline	text-decoration 相关
.cur-p, .cur-d	cursor 相关
.v-base, .v-mid, .v-top, .v-btm	vertical-align 相关
.fl, .fr, .fn	float 相关
.br0, .br-50, .br-100, .br-pill	border-radius 相关
.relative, .absolute, .fixed, .static	position相关
.absolute--fill	absolute 全局居中
.absolute--middle	absolute 纵向居中
.absolute--center	absolute 水平居中
.lh-solid	line-height: 1;
.border-box	box-sizing: border-box;
.m-0, .p-0	margin: 0 !important; padding: 0 !important;

类名	数值范围	示例/说明
.mt-#{$i}, .mr-#{$i}, .mb-#{$i}, .ml-#{$i}	0 ≤ $i ≤ 100 偶数和 5 的倍数	.mt-50 (margin-top: 50px;)
.pt-#{$i}, .pr-#{$i}, .pb-#{$i}, .pl-#{$i}	0 ≤ $i ≤ 100 偶数和 5 的倍数	.pt-50 (padding-top: 50px;)
.w#{$i}, .h#{$i}	0 ≤ $i ≤ 100 偶数和 5 的倍数	.w50 (width: 50px;)
.w#{$i}p, .h#{$i}p	0 ≤ $i ≤ 100 10 的倍数	.w50p (width: 50%;)
.mw#{$i}p, .mh#{$i}p	0 ≤ $i ≤ 100 10 的倍数	.mw50p (max-width: 50%;)
.top-#{$i}, .right-#{$i}, .bottom-#{$i}, .left-#{$i}	0 ≤ $i ≤ 100 5 的倍数	.top-50 (top: 50px;)
.lh#{$i}	0 ≤ $i ≤ 50 偶数和 5 的倍数	.lh50 (line-height: 50px;)
.fw#{$i}	0 < $i < 10 数值乘以 100	.fw5 (font-weight: 500;)
.f#{$i}	12 ≤ $i ≤ 30	.f25 (font-size: 25px;)