# SCSS Files

##### <span style="color: #ba372a;">**SCSS Folder Structure**</span>

The scss files are contained in five subfolders as follows.

1. **base** - There are 13 *\_common-nn-category.scss* files where nn indicates order and category indicates the content type (e.g., header,, topography, footer, etc.). All files begin with the underscore character. The underscore indicates to the scss compiler that the individual file is not to be compiled when saved after an update. See the Integrated Development Environment (IDE) chapter for detailed information of this process. 
    - The **base** and **common** files are concatenated and compiled into a single file (*allStylesCSS.css*) that is invoked using the **buildAllStylesCSS** builds script.
2. **common** - This folder contains two files which are common to both the main and admin areas. 
    - **common\_variables-root.scss** - Contains the css variables used throughout the system.
    - **common\_variables-sass.scss** - Contains the sass variables used throughout the system. The sass variables are used in css @media queries to indicate breakpoints for multiple monitor/mobile viewport sizes.
3. **mixins** - Mixins are scss **functions** used to expand the capability of css. An individual mixin is used to do a specific task, usually indicated by the name.
4. **pages** - Contains the individual scss files relating to the specific main php file (e.g., the school.scss file is loaded by the school.php file).
5. **vendor** - Some vendor APIs require there own css files. This folder contains these files. If an element of the vendor file needs to be modified it is suggested that the change be made the corresponding base file that would override the vendor style.