Skip to main content

SASS

Take advantage of the Onekit past, current and future updates, by learning how to create your own content without changing the core styles of Onekit.

Create a New Style

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with src/scss/custom/.scss files.

You can create new style from src/scss/custom/custom.scss

Customized Theme

Onekit colors, sizing, forms and many other components are called from src/scss/onekit/ to src/scss/_variables.scss, overridden and generated back to src/css/ using Gulp and SASS.

You can add or remove Onekit component from src/scss/theme.scss and src/scss/onekit/onekit.scss

You can editing Onekit variables from src/scss/_variables.scss

You can call Onekit css from src/css/theme.css

Refresh after Changes

After modifying *.scss or _variables.scss, saving the SCSS file and the Gulp task will be required to proceed with changes. You can use gulp task and following css will automate updated after make changes in scss file
src/css/theme.css

Please read build tools documentation in Build Tools