When building a WordPress theme with SCSS I like to split up my code into a series of folders and partials, following a logical structure. A useful feature of Gulp WP Toolkit is the ability to easily load all of the SCSS partials within a folder.
This is made possible by the gulp-sass-bulk-import package.
Your original SCSS file might look like this:
//---------------------------- | |
// Base | |
//---------------------------- | |
@import "base/accessibility"; | |
@import "base/buttons"; | |
@import "base/forms"; | |
@import "base/headings"; | |
@import "base/layout"; | |
@import "base/lists"; | |
@import "base/media"; | |
@import "base/tables"; | |
@import "base/typography"; | |
@import "base/wordpress"; |
But using Gulp WP Toolkit, it can be rewritten as:
//---------------------------- | |
// Base | |
//---------------------------- | |
@import "base/*"; |
If you need to load a specific file first, then you can do so by adding an @import
statement before the wildcard @import
, like this:
//---------------------------- | |
// Base | |
//---------------------------- | |
@import "base/typography"; | |
@import "base/*"; |
Leave a Reply