In this article
The stylesheet for each theme is a compiled version of the Sass source files contained within the scss/
directory. Sass is a preprocessor that lets you use features that don’t exist in CSS yet like variables, nesting, mixins and inheritance and can make writing custom CSS much faster.
Editing styles
There are two ways to go about making changes to your theme’s stylesheet:
- You can update the
style.css
file directly, either through the Zendesk Theming Center or locally using your favourite code editor. Any changes made will be immediately reflected in your Help Center without the need to take any further steps. - You can update the Sass source files in the
scss/theme/
. This could include specifying new values for framework Sass variables, adding your own custom declarations or taking advantage of the functions and mixins that are included with the framework. If you take this approach you will need to re-compile the stylesheet once you’ve made your changes.
Using Sass
The Sass source files are organized into folders, representing their role in the framework:
theme/
└── scss/
├── framework/
│ ├── base/
│ ├── elements/
│ ├── utilities/
│ ├── functions/
│ ├── mixins/
│ ├── _variables.scss
│ └── index.scss
├── theme/
│ ├── _variables.scss
│ └── index.scss
└── index.scss
-
The
framework/
folder contains framework-wide styles and variables.-
The
base/
folder contains base styles that apply to HTML elements and provide a solid foundation for the styles that come later. -
The
elements/
folder contains element styles that are reusable blocks of UI which can be combined to create patterns. -
The
utilities/
folder contains utility classes that are single purpose styles that can be used to change the look-and-feel of an existing element or pattern, or create entirely new layouts from scratch. -
The
functions/
folder contains all Sass functions used by the framework. -
The
mixins/
folder contains all Sass mixins used by the framework.
-
-
The
theme/
folder contains styles and variables specific to the current theme.
Updating variables
Framework and theme-specific Sass variables are contained within their respective _variables.scss
files. If you wish to override an existing variable or add a new one, we recommend doing so in the theme/_variables.scss
file.
Theme settings are also included as variables within both the Sass files and style.css
stylesheet, but have a different naming convention. Theme settings use underscores as separators (for example, $color_primary
) whereas standard Sass variables use a hyphen (for example, $color-gray-100
).
Compiling Sass
Our themes all include a simple Ruby script for handling the Sass compilation step, which can be found in the bin/
folder.
The script requires both Ruby and the sassc
gem to be installed, so to recompile the stylesheet:
- Install Ruby on your computer by following these instructions.
- Install the
sassc
gem using the shell commandgem install sassc
. - Compile your Sass files by running the shell command
./bin/compile.rb
from your theme directory:
The first two steps only have to be performed once.
This will take all the .scss
files inside the scss/
and create a new style.css
file that is then used by Zendesk Guide.