CSS 预处理

SACSS 核心代码 只有一个 CSS 文件，需要定制的部分我们提供了 SASS、 LESS、Stylus 的 Mixin 辅助你快速构建 Utility First CSS。

为什么需要自定义？点我了解

安装

$ npm i sacss

使用

LESS

@import '~sacss/less/WidthPrefix';

@import '~sacss/less/SACSS';

@import "~sacss/less/Helpers";

// 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)

@prefix: '';

// 单位换算表达式

@unit: 1px;

// 为核心文件添加前缀

#WidthPrefix(@prefix);

// margin

#SACSS(@prefix; 'margin-top'; 'mt'; 8, 16; @unit);

#SACSS(@prefix; 'margin-right'; 'mr'; 8, 16; @unit);

#SACSS(@prefix; 'margin-bottom'; 'mb'; 8, 16; @unit);

#SACSS(@prefix; 'margin-left'; 'ml'; 8, 16; @unit);

// padding

#SACSS(@prefix; 'padding-top'; 'pt'; 8, 16; @unit);

#SACSS(@prefix; 'padding-right'; 'pr'; 8, 16; @unit);

#SACSS(@prefix; 'padding-bottom'; 'pb'; 8, 16; @unit);

#SACSS(@prefix; 'padding-left'; 'pl'; 8, 16; @unit);

// font

#SACSS(@prefix; 'font-size'; 'fs'; 12, 16; @unit);

#SACSS(@prefix; 'line-height'; 'lh'; 16, 24; @unit);

// size

#SACSS(@prefix; 'width'; 'w'; 16, 24; @unit);

#SACSS(@prefix; 'height'; 'h'; 16, 24; @unit);

// Helpers

.clearfix{ #Clearfix; }

.ellipsis{ #Ellipsis; }

.cell{ #Cell; }

.ellipsis-mul{ #Ellipsis-multiple; }

.ellipsis-mul._2{ -webkit-line-clamp: 2; }

SASS

@import '~sacss/sass/WidthPrefix';

@import '~sacss/sass/SACSS';

@import "~sacss/sass/Helpers";

// 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)

$prefix: '';

// 单位换算表达式

$unit: 1px;

// 为核心文件添加前缀

@include WidthPrefix($prefix);

// margin

@include SACSS($prefix; 'margin-top', 'mt', (8, 16), $unit);

@include SACSS($prefix; 'margin-right', 'mr', (8, 16), $unit);

@include SACSS($prefix; 'margin-bottom', 'mb', (8, 16), $unit);

@include SACSS($prefix; 'margin-left', 'ml', (8, 16), $unit);

// padding

@include SACSS($prefix; 'padding-top', 'mt', (8, 16), $unit);

@include SACSS($prefix; 'padding-right', 'mr', (8, 16), $unit);

@include SACSS($prefix; 'padding-bottom', 'mb', (8, 16), $unit);

@include SACSS($prefix; 'padding-left', 'ml', (8, 16), $unit);

// font

@include SACSS($prefix; 'font-size', 'fs', (12, 16), $unit);

@include SACSS($prefix; 'line-height', 'lh', (16, 24), $unit);

// size

@include SACSS($prefix; 'width', 'w', (16, 24), $unit);

@include SACSS($prefix; 'height', 'h', (16, 24), $unit);

// Helpers

.clearfix{ @include Clearfix; }

.ellipsis{ @include Ellipsis; }

.cell{ @include Cell; }

.ellipsis-mul{ @include Ellipsis-multiple; }

.ellipsis-mul._2{ -webkit-line-clamp: 2; }

Stylus

@import '~sacss/stylus/WidthPrefix';

@import '~sacss/stylus/SACSS';

@import "~sacss/stylus/Helpers";

// 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)

$prefix = ''

// 单位换算表达式

$unit = 1px

// 为核心文件添加前缀

WidthPrefix($prefix)

// margin

SACSS($prefix, 'margin-top', 'mt', 8 16, $unit)

SACSS($prefix, 'margin-right', 'mr', 8 16, $unit)

SACSS($prefix, 'margin-bottom', 'mb', 8 16, $unit)

SACSS($prefix, 'margin-left', 'ml', 8 16, $unit)

// padding

SACSS($prefix, 'padding-top', 'mt', 8 16, $unit)

SACSS($prefix, 'padding-right', 'mr', 8 16, $unit)

SACSS($prefix, 'padding-bottom', 'mb', 8 16, $unit)

SACSS($prefix, 'padding-left', 'ml', 8 16, $unit)

// font

SACSS($prefix, 'font-size', 'fs', 12 16, $unit)

SACSS($prefix, 'line-height', 'lh', 16 24, $unit)

// size

SACSS($prefix, 'width', 'w', 16 24, $unit)

SACSS($prefix, 'height', 'h', 16 24, $unit)

// Helpers

.clearfix

Clearfix()

.ellipsis

Ellipsis()

.cell

Cell()

.ellipsis-mul

Ellipsis-multiple()

.ellipsis-mul._2

-webkit-line-clamp: 2

Output

/* 这里忽略了 WidthPrefix 生成的代码 */

.mt8{margin-top:8px}

.mt16{margin-top:16px}

.mr8{margin-right:8px}

.mr16{margin-right:16px}

.mb8{margin-bottom:8px}

.mb16{margin-bottom:16px}

.ml8{margin-left:8px}

.ml16{margin-left:16px}

.pt8{padding-top:8px}

.pt16{padding-top:16px}

.pr8{padding-right:8px}

.pr16{padding-right:16px}

.pb8{padding-bottom:8px}

.pb16{padding-bottom:16px}

.pl8{padding-left:8px}

.pl16{padding-left:16px}

.fs12{font-size:12px}

.fs16{font-size:16px}

.lh16{line-height:16px}

.lh24{line-height:24px}

.w16{width:16px}

.w24{width:24px}

.h16{height:16px}

.h24{height:24px}

.clearfix:after{display:table;content:'';clear:both}

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cell{display:table-cell;width:2000px}

.ellipsis-mul{display:-webkit-box;overflow:hidden;word-wrap:break-word;-webkit-box-orient:vertical}

.ellipsis-mul._2{ -webkit-line-clamp: 2; }

npm install之后，点击代码示例右上角，复制粘贴到项目里使用即可。

这已经是除开命名规则之外，需要了解的所有代码了。

• 命名前缀WidthPrefix：点我了解
• 单位换算unit：点我了解
• 辅助方法helpers：点我了解