CSS PreProcessor

SACSS Core Code has only one CSS file, we provide SASS、 LESS、Stylus Mixin to help you build Utility First CSS quickly.

Why do you need to customize? click me to learn more

Install

$ npm i sacss

Use

LESS

@import '~sacss/less/WidthPrefix';

@import '~sacss/less/SACSS';

@import "~sacss/less/Helpers";

// This prefix is added to all ClassName (but it is not recommended to add the prefix)

@prefix: '';

// Unit conversion expressions

@unit: 1px;

// Adding prefixes to core code

#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";

// This prefix is added to all ClassName (but it is not recommended to add the prefix)

$prefix: '';

// Unit conversion expressions

$unit: 1px;

// Adding prefixes to core code

@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";

// This prefix is added to all ClassName (but it is not recommended to add the prefix)

$prefix = ''

// Unit conversion expressions

$unit = 1px

// Adding prefixes to core code

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

/* The code generated by WidthPrefix is ignored here */

.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; }

After npm install, just click on the top right corner of the code example and copy and paste it into the project to use it.

This is all you need to know except for the naming convention, all you need to know about the code.

• Naming prefix WidthPrefix: click me to learn
• Unit conversion unit: click me to learn
• Helper methods helpers: click me to learn