Leaf is highly customizable thanks to a great number of variables spread across multiple SASS files.

There are 4 levels of variables:

  • Initial variables: Global variables with literal values.
  • Derived variables: Global variables with values that reference other variables.
  • Generic variables: for the HTML elements which carry no CSS class.
  • element/component variables: variables that are specific to a element/component.

Since these variables carry the !default flag, they can be assigned a new value either before or after having been imported.

How to

To customize Leaf you will have to:

  • Install or download Leaf
  • Have working Sass setup
  • Create your own .sass or .scss file


@charset "utf-8";

//  Define your variables
$purple: #635ac7;

//  Overrided Leaf's variables
$primary: $purple;

//  Import what you need from Leaf.
@import "~@fanxie/leaf-css/scss/utils/_all";
@import "~@fanxie/leaf-css/scss/elements/container";
@import "~@fanxie/leaf-css/scss/grid/columns";
@import "~@fanxie/leaf-css/scss/elements/other";