Sections

Core concepts

Base styles

Sass variables

Sass variables provide complete control over base styles, utilities, elements and patterns throughout a theme. They are intended for experienced users intending to make significant branding or customization changes.

In this article

You can find variables in the _variables.scss Sass partials in the scss/framework/ and scss/theme/ folders.

We recommend adding new variables and redefining existing ones in the scss/theme/ folder, as this will allow you to easily update the framework styles in the future. For more information about Sass and how styles are managed in our Zendesk themes, please refer to the Theme styles article.

Usage

An example of Sass variables in action are those used to define the gray color palette:

//
// Gray scale
//
// These are the colors you will use the most and will make up the majority of your UI.
// They're often used for text, backgrounds and borders.
//

$color-gray-100:    #F7FAFC !default;
$color-gray-200:    #EDF2F7 !default;
$color-gray-300:    #E2E8F0 !default;
$color-gray-400:    #CBD5E0 !default;
$color-gray-500:    #A0AEC0 !default;
$color-gray-600:    #718096 !default;
$color-gray-700:    #4A5568 !default;
$color-gray-800:    #2D3748 !default;
$color-gray-900:    #1A202C !default;

Using a different shade for $color-gray-600 could be achieved by adding the following line to your theme/_variables.scss file and recompiling the Sass styles:

$color-gray-600: #656e7b;

Theme setting variables

When writing custom Sass or CSS you can reference theme settings by using the identifier property from the manifest.json file as a variable name. For example, use the $heading_color variable to apply the color defined in the Heading Color setting in CSS:

.h1 {
   color: $heading_color;
}

Theme assets can also be referenced using a variable name, which can be found in the Theming Center interface:

  1. Click the Customize design icon (Customize icon) in the sidebar.

  2. Click Customize on the theme you want to edit.

  3. Click Edit code.

  4. In the Assets section, click the asset file you want to use

Theme assets