Customise with SASS

Use Sass to customise how Rachana looks and behaves in your project

Working with Rachana's source files

The Sass source files for cgds can be found in the folder
node_modules/@dgtdept/rachana/sass

        
site-folder/
├── scss
│   └── custom.scss
└── node_modules/
    └── @dgtdept/rachana/sass/
        └── cgds.scss

Whenever possible, avoid modifying the core sass files in @dgtdept/rachana/sass/

Importing

In your custom.scss, you can choose to include all cgds-theme files or pick the components you need. However, do note that there are some requirements and dependencies across the components.

Include all parts

        
// Custom.scss
// Option A: Include all of the Rachana theme

// Include any default variable overrides here

@import "~@dgtdept/rachana/sass/cgds.scss";

// Then add additional custom code here

Include parts of Rachana

        
/// Custom.scss
// Option B: Include parts of Rachana

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~@dgtdept/rachana/sass/functions";

// 2. Include any default variable overrides here

// 3. Include the remainder of required Rachana stylesheets
@import "~@dgtdept/rachana/sass/variables";

// 4. Include any default map overrides here

// 5. Include the remainder of the required parts

@import "~@dgtdept/rachana/sass/mixins";
@import "~@dgtdept/rachana/sass/root";

// 6. Optionally include any other parts as needed
@import "~@dgtdept/rachana/sass/utilities";
@import "~@dgtdept/rachana/sass/reboot";
@import "~@dgtdept/rachana/sass/type";
@import "~@dgtdept/rachana/sass/images";
@import "~@dgtdept/rachana/sass/containers";
@import "~@dgtdept/rachana/sass/grid";
@import "~@dgtdept/rachana/sass/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "~@dgtdept/rachana/sass/utilities/api";

// 8. Add additional custom code here

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

        
@import "~@dgtdept/rachana/sass/accordion";

Variables

You can find the complete list of variables inside @dgtdept/rachana/sass/_variables.scss or in our Rachana GitHub repo

Here's an example that changes the background-color and color for the body when importing and compiling cgds-theme via npm:

      
// Required
@import "~@dgtdept/rachana/sass/functions";

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

// Required
@import "~@dgtdept/rachana/sass/cgds-variables";


// Optional components here
@import "~@dgtdept/rachana/sass/accordion";
@import "~@dgtdept/rachana/sass/alert";
@import "~@dgtdept/rachana/sass/badge";
@import "~@dgtdept/rachana/sass/breadcrumb";
// etc