Customise with SASS
Use Sass to customise how SGDS looks and behaves in your project
Working with SGDS's source files
The Sass source files for sgds can be found in the foldernode_modules/@govtechsg/sgds/sass
site-folder/
├── scss
│ └── custom.scss
└── node_modules/
└── @govtechsg/sgds/sass/
└── sgds.scss
Whenever possible, avoid modifying the core sass files in
@govtechsg/sgds/sass/
Importing
In your custom.scss
, you can choose to include all sgds-theme
files or pick the
components you need. However do note that are some requirements and dependencies across the components.
Include all parts
// Custom.scss
// Option A: Include all of SGDS theme
// Include any default variable overrides here
@import "~@govtechsg/sgds/sass/sgds.scss";
// Then add additional custom code here
Include parts of SGDS
/// Custom.scss
// Option B: Include parts of SGDS
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~@govtechsg/sgds/sass/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required SGDS stylesheets
@import "~@govtechsg/sgds/sass/variables";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "~@govtechsg/sgds/sass/mixins";
@import "~@govtechsg/sgds/sass/root";
// 6. Optionally include any other parts as needed
@import "~@govtechsg/sgds/sass/utilities";
@import "~@govtechsg/sgds/sass/reboot";
@import "~@govtechsg/sgds/sass/type";
@import "~@govtechsg/sgds/sass/images";
@import "~@govtechsg/sgds/sass/containers";
@import "~@govtechsg/sgds/sass/grid";
@import "~@govtechsg/sgds/sass/helpers";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "~@govtechsg/sgds/sass/utilities/api";
// 8. Add additional custom code here
If you are using Webpack, u can omit the node_modules
directory
@import "~@govtechsg/sgds/sass/accordion";
Variables
You can find the complete list of variables inside @govtechsg/sgds/sass/_variables.scss
or in our SGDS github repo
Here's an example that changes the background-color
and color for the body
when importing and compiling sgds-theme
via npm:
// Required
@import "~@govtechsg/sgds/sass/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "~@govtechsg/sgds/sass/sgds-variables";
// Optional components here
@import "~@govtechsg/sgds/sass/accordion";
@import "~@govtechsg/sgds/sass/alert";
@import "~@govtechsg/sgds/sass/badge";
@import "~@govtechsg/sgds/sass/breadcrumb";
// etc