-
Notifications
You must be signed in to change notification settings - Fork 1
Website Sass Overview
Sass is a CSS preprocessor that helps make CSS easier to write, providing convenient syntax and features that are not available with plain CSS. Sass accomplishes this is by taking files in Sass/SCSS syntax and compiling them into working CSS files.
Although webpack is written to be a JavaScript module bundler, it is also used in this project to compile Sass files.
The SDG National Reporting Initiative website makes minimal use of Sass frameworks, using only Bourbon Neat to provide grid layouts.
Project-specific styles are written in SCSS syntax and split into multiple smaller partial Sass files (to ease maintenance) located under _app/sass/sdg/.
_app/sass/sdg.scss is the centralized import file for all styles specifically written for the website, and all partials that you wish to have available in the website should be imported into _app/sass/sdg.scss.
During the build process, webpack processes _app/sass/sdg.scss and outputs a finished CSS file under assets/css/.
See webpack.sass.js under the website's root directory for configuration details.
To edit the styles, you will have to update the appropriate SCSS files under _app/sass/. Once you have updated the files, commit your changes to the develop branch and push them upstream to the website GitHub repository's develop branch. This triggers a staging build in Netlify which should reflect the changes on https://staging.sdgreporting.org/ when the build has completed.
Note: It is good practice to check your changes in your local Jekyll server (see Getting Started) before pushing changes upstream to GitHub.
Or, if you have multiple developers working on the project, it is best to have each developer clone the project and push changes to their own copies of the repository on GitHub, then submit pull requests when the code is ready to be reviewed and merged into the main repository.
When the code is ready to be deployed to production, you will have to merge the develop branch of the website GitHub repository into the master branch. Updating the master branch will trigger a production build.