# Customize

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

# Example

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