Each theme’s stylesheet 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; all of which help to make writing CSS faster and more fun.
The source files are organized into folders, representing their role in the framework:
├── scss/ │ ├── framework/ │ │ ├── base/ │ │ ├── elements/ │ │ ├── utilities/ │ │ ├── functions/ │ │ ├── mixins/ │ │ ├── _variables.scss │ │ └── index.scss │ ├── theme/ │ │ ├── _variables.scss │ │ └── index.scss │ └── index.scss
/framework/basefolder contains base styles that apply to HTML elements and provide a solid foundation for the styles that come later.
/framework/utilitiesfolder 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.
theme/folder contains theme-specific styles and variables.
When editing theme styles you can update the
style.css file directly, either through the Zendesk Theming Center or locally using your favourite code editor. Alternatively, you can work with the Sass source files directly, which requires that you re-compile the styles once you have made your changes.
We recommend only editing Sass files within the
scss/theme/ folder. You can add your own custom declarations or overwrite framework settings by adding variable overrides in the
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. Once you have installed Ruby by following these instructions, you can install the
sassc gem using the shell command
gem install sassc.
You can now compile your Sass files by running the command
./bin/compile.rb from your theme directory, which will take all the
.scss files inside the
scss/ and create the
style.css file that is consumable by Zendesk Guide.