PostCSS Keywords

PostCSS Keywords lets you create custom keywords which can be used in declarations.

@keyword small {
  value: 24px;
  property: padding, margin;
}
 
@keyword small {
  value: 16px;
  property: font-size;
}
 
@keyword medium {
  value: 40px;
  property: padding, margin;
}
 
.example {
  font-size: small;
  padding: small medium;
  margin: small;
}

Outputs:

.example {
  font-size: 16px;
  padding: 24px 40px;
  margin: 24px;
}

Setup

Add it to your project:

npm install postcss-keywords --save-dev