SASS File and Folder Structure
The following is a map of the SASS structure for the Tyndale theme on tyndale.ca. The .scss files are found at /sites/all/themes/tyndale/sass — the output is processed to /sites/all/themes/tyndale/css as global.css — this is the main style sheet for the theme.
Structure of /sass
_mixins.scss ↑
_utility.scss ↑
_variables.scss ↑
base
- _base.scss ↑
- _fonts.scss
- _forms.scss
- _headings.scss
- _links.scss
- _normalize.scss
- _tables.scss
- _video.scss
components
- _accordion.scss
- _boxes.scss
- _buttons.scss
- _cards.scss
- _components.scss ↑
- _images.scss
- _paragraphs.scss
- _person-bios.scss
- _tabs.scss
- _text.scss
content
- _content.scss ↑
- _landing-pages.scss
- _university-landing.scss
fortawesome
- _fortawesome-external.scss ↑
∞ global.scss → ../css/global.css
legacy
- _legacy-ct.scss
- _legacy-global.scss
- _legacy-tyndale-icons.scss
- _legacy-views.scss
- _legacy.scss ↑
navigation
- _links-lists.scss
- _main-menu.scss
- _menus.scss
- _navigation.scss ↑
- _pagers.scss
- _search.scss
- _sidebar.scss
- _superfish.scss
- _tabs.scss
- _user-menu.scss
structure
- _content-zone.scss
- _footer.scss
- _header.scss
- _sidebars.scss
- _structure.scss ↑
views
- _calendar.scss
- _date.scss
- _events.scss
- _featured-faculty.scss
- _social.scss
- _views-general.scss
- _views.scss ↑
Legend
- ↑ file is being pulled in to master file
- ∞ master file — converts to CSS
Order of Import
The SCSS will be processed in the following order — this will effect the cascade.
// BASE
@import "variables";
@import "mixins";
@import "utility";
@import "base/base";
// LEGACY
@import "legacy/legacy";
//Navigation
@import "navigation/navigation";
//STRUCTURE
@import "structure/structure";
// COMPONENTS
@import "components/components";
// CONTENT TYPES
@import "content/content";
// VIEWS
@import "views/views";
// FORT AWESOME
@import "fortawesome/fortawesome-external";