In the Brand Blueprint CSS files are generated from Saas files (see sass-lang.com).
Except for the main Saas
file of the theme ($theme-name.scss) all other files are partial files.
That is, the name starts with an underscore so that Saas does not render separate files. In each
folder is a _import.scss file in which all the other partial files from the
folder are imported. This is required by Idea, to make all files "green". For Saas it is enough to link
to all imported files from the main Saas file.
The folder structure is as follows:
sass // scss files should be located inside
a themes 'src' folder
├── base // contains configuration in form of variables
│ ├── _import.scss
│ ├── _variables.scss
│ └── ...
├── components // contains components with declarations
│ ├── _component1.scss
│ ├── _component2.scss
│ └── ...
├── utils // contains mixins and functions to be used by
│ components
│ ├── _import.scss
│ ├── _utils1.scss
│ ├── _utils2.scss
│ └── ...
└── $theme-name.scss // main Sass file for theme. Imports
all required Sass files
Example 6.9. Folder structure of the Saas files
Commenting in Saas
The following conventions for comments are used:
Comments for SASS are made with "//". They do not appear in the generated CSS and can be used for internal comments.
Comments appearing in the generated CSS are made with "/* */". These comments are removed when minifying the CSS in the CAE.
Comments appearing in the generated CSS "/*! */". These comments are not removed when minifying the CSS in the CAE. Used for license texts, for example.
 |  |  |
 |