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 folder
node_modules/@govtechsg/sgds/sass

site-folder/
├── scss
│   └── custom.scss
└── node_modules/
    └── @govtechsg/sgds/sass/
        └── bootstrap/
        └── sgds-theme/
            └── sgds.scss

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 "../node_modules/@govtechsg/sgds/sass/sgds.scss";

// Then add additional custom code here

Include parts of SGDS

// Custom.scss
// Option B: Include parts of SGDS theme

// Include any default variable overrides here
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/@govtechsg/sgds/sass/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required SGDS stylesheets
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/sgds-variables";

// 4. Optionally include any other parts as needed
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/accordion";
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/alert";
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/badge";
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/breadcrumb";

// Then add additional custom code here

If you are using Webpack, u can omit the node_modules directory

@import "~@govtechsg/sgds/sass/sgds-theme/components/accordion";

Variables

You can find the complete list of sgds-theme variables inside sass/sgds-theme/_sgds-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 "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/sgds-variables";


// Optional components here
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/accordion";
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/alert";
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/badge";
@import "../node_modules/@govtechsg/sgds/sass/sgds-theme/components/breadcrumb";
// etc
Home


Previous version 2.0.0