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.
There are two ways to go about making changes to your theme’s stylesheet:
- You can update the
style.cssfile 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.
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
framework/folder contains framework-wide styles and variables.
base/folder contains base styles that apply to HTML elements and provide a solid foundation for the styles that come later.
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.
functions/folder contains all Sass functions used by the framework.
mixins/folder contains all Sass mixins used by the framework.
theme/folder contains styles and variables specific to the current theme.
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 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,
Our themes all include a simple Ruby script for handling the Sass compilation step, which can be found in the
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
sasscgem using the shell command
gem install sassc.
- Compile your Sass files by running the shell command
./bin/compile.rbfrom 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.