Custom Token

sacss/

├── less/ # The folder where the LESS Mixin is stored

│ ├── SACSS.less # Helps create a secondary LESS Mixin for sacss

│ ├── WidthPrefix.less # Add custom prefixes to the core code

│ └── Helpers.less # Common helper mixin independent of sacss

├── sass/ # Folder where LESS Mixin is stored

│ ├── SACSS.scss # Helper SASS Mixin to help create sacss

│ ├── WidthPrefix.scss # Add custom prefixes to the core code

│ └── Helpers.scss # Common helper mixin independent of sacss

└── index.css # Core code that is basically the same for all projects (only customization is recommended, named prefixes);

less and sass have the exact same documentation and API, just syntax different implementations.

The core code sacss/index.css basically holds layout related code. There are only two colors, pure black and pure white, and even the common font-size related code is not included.

The reason for this is that different designers have different design specifications for different projects, and we recommend combining them with the project for customization.

SACSS API

name	explanation	example
prefix	class name prefix	'_'
attribute name	full Style attribute	'font-size'
property abbreviations	naming rule-based property abbreviations	'fs'
List of values	List of values to be output consecutively	8,16,24
units	All values will be multiplied with units (null means no units are needed)	1px

LESS

@import 'sacss/less/SACSS';

@prefix: ''; // class name prefix

@unit: 1px; // unit conversion expression

#SACSS('attribute name'; '@{prefix} attribute abbreviation'; 'list of values'; @unit);

SASS

@import 'sacss/sass/SACSS';

$prefix: ''; // class name prefix

$unit: 1px; // unit conversion expression

@include SACSS('attribute name', '#{$prefix} attribute abbreviation', (list of values), $unit);

For naming rules for abbreviations, please click here.

LESS

@import 'sacss/less/SACSS';

@prefix: '';

@prefix_: '_';

@unit_px: 1px;

@unit_rem: (1/16*1rem); // Parentheses are required here in less

#SACSS('margin-top'; '@{prefix}mt'; 8, 16, 24; @unit_px);

#SACSS('margin-right'; '@{prefix}mr'; 8, 16, 14; @unit_px);

#SACSS('margin-bottom'; '@{prefix_}mb'; 8, 16, 24; @unit_rem);

#SACSS('margin-left'; '@{prefix_}ml'; 8, 16, 24; @unit_rem);

SASS

@import 'sacss/sass/SACSS';

$prefix: '';

$prefix_: '_';

$unit_px: 1px;

$unit_rem: 1/16*1rem;

@include SACSS('margin-top', '#{$prefix}mt', (8, 16, 24), $unit_px);

@include SACSS('margin-right', '#{$prefix}mr', (8, 16, 24), $unit_px);

@include SACSS('margin-bottom', '#{$prefix_}mb', (8, 16, 24), $unit_rem);

@include SACSS('margin-left', '#{$prefix_}ml', (8, 16, 24), $unit_rem);

Output CSS

.mt8{margin-top:8px}

.mt16{margin-top:16px}

.mt24{margin-top:24px}

.mr8{margin-right:8px}

.mr16{margin-right:16px}

.mr24{margin-top:24px}

._mb8{margin-bottom:.5rem}

._mb16{margin-bottom:1rem}

._mb14{margin-bottom:1.5rem}

._ml8{margin-left:.5rem}

._ml16{margin-left:1rem}

._ml14{margin-left:1.5rem}

This is the same method as SACSS, just to make it simpler and intuitive to create the CSS code in output.

If you feel comfortable writing this part of the CSS by hand, you can also write it yourself.

Unit Conversions

LESS

@import 'sacss/less/SACSS';

// px

#SACSS('margin-top'; 'mt'; 8, 16; 1px);

// rem

#SACSS('margin-bottom'; 'mb'; 8, 16; (1/16*1rem));

// Empty

#SACSS('font-weight'; 'fw'; 100,200,300,400;);

SASS

@import 'sacss/sacss/SACSS';

// px

@include SACSS('margin-top', 'mt', (8, 16), 1px);

// rem

@include SACSS('margin-bottom', 'mb', (8, 16), 1/16*1rem);

// Empty

@include SACSS('font-weight', 'fw', (200,400),);

Output CSS

/* px * /

.mt8{ margin-top: 8px; }

.mt16{ margin-top: 16px; }

/* rem * /

.mb8{ margin-bottom: 0.5rem; }

.mb16{ margin-bottom: 1rem; }

/* Empty * /

.fw200{ font-weight:200; }

.fw400{ font-weight:400; }

If a rem-based conversion of units is required, fill in 1/16*1rem.

The SACSS method is only available for use with values of numeric type.

For example, font-weight:bold; cannot be created using SACSS, but font-weight:400; ok.

Project examples

• A project design specification: all spacing, font size must be a multiple of 4 and the primary color is red.
• B project design specification: all spacing, font size must be a multiple of 5, and the primary color is blue;

A 项目 LESS

/* All spacing, font size must be a multiple of 4; */

@import 'sacss/less/SACSS';

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

@prefix: '';

// Unit conversion expressions

@unit: 1px;

// margin

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

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

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

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

// padding

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

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

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

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

// font

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

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

// Color

.c_primary{ color: red; }

.bc_primary{ background-color: red; }

/* Other custom codes */

A 项目 SASS

/* All spacing, font size must be a multiple of 4; */

@import 'sacss/sass/SACSS';

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

$prefix: '';

// Unit conversion expressions

$unit: 1px;

// margin

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

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

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

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

// padding

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

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

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

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

// font

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

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

// Color

.c_primary{ color: red; }

.bc_primary{ background-color: red; }

/* Other custom codes */

B 项目 LESS

/* All spacing, font size must be in multiples of 5; */

@import 'sacss/less/SACSS.less';

// This prefix is added to all ClassName (but prefixing is not recommended)

@prefix: '';

// Unit conversion expressions

@unit: 1px;

// margin

#SACSS('margin-top'; '@{prefix}mt'; 10, 15; @unit);

#SACSS('margin-right'; '@{prefix}mr'; 10, 15; @unit);

#SACSS('margin-bottom'; '@{prefix}mb'; 10, 15; @unit);

#SACSS('margin-left'; '@{prefix}ml'; 10, 15; @unit);

// padding

#SACSS('padding-top'; '@{prefix}pt'; 10, 15; @unit);

#SACSS('padding-right'; '@{prefix}pr'; 10, 15; @unit);

#SACSS('padding-bottom'; '@{prefix}pb'; 10, 15; @unit);

#SACSS('padding-left'; '@{prefix}pl'; 10, 15; @unit);

// font

#SACSS('font-size'; '@{prefix}fs'; 15, 20; @unit);

#SACSS('line-height'; '@{prefix}lh'; 20, 25; @unit);

// Color

.c_primary{ color: blue; }

.bc_primary{ background-color: blue; }

/* Other custom codes */

B 项目 SASS

/* All spacing, font size must be in multiples of 5; */

@import 'sacss/sass/SACSS.scss';

// This prefix is added to all ClassName (but prefixing is not recommended)

$prefix: '';

// Unit conversion expressions

$unit: 1px;

// margin

@include SACSS('margin-top', '#{$prefix}mt', (10, 15), $unit);

@include SACSS('margin-right', '#{$prefix}mr', (10, 15), $unit);

@include SACSS('margin-bottom', '#{$prefix}mb', (10, 15), $unit);

@include SACSS('margin-left', '#{$prefix}ml', (10, 15), $unit);

// padding

@include SACSS('padding-top', '#{$prefix}mt', (10, 15), $unit);

@include SACSS('padding-right', '#{$prefix}mr', (10, 15), $unit);

@include SACSS('padding-bottom', '#{$prefix}mb', (10, 15), $unit);

@include SACSS('padding-left', '#{$prefix}ml', (10, 15), $unit);

// font

@include SACSS('font-size', '#{$prefix}fs', (15, 20), $unit);

@include SACSS('line-height', '#{$prefix}lh', (20, 25), $unit);

// Color

.c_primary{ color: blue; }

.bc_primary{ background-color: blue; }

/* Other custom codes */

What to customize

• margin: abbreviation m
• padding: abbreviation p
• font-size: abbreviation fs
• line-height: abbreviation lh
• color: abbreviation c_
• background-color: abbreviation bc_
• The Token you communicate with the designer (the agreement between you and the designer)