Skip to main content

@roots/bud-sass

Sass support can be added by installing the @roots/bud-sass extension.

Installation

yarn add @roots/bud-sass --dev

Usage

After installation, sass will automatically preprocess any .scss or .sass modules in your project with sass.

Additionally, if @roots/bud-postcss is available, postcss will be applied to your .scss and .sass source files.

If you are using @roots/bud-preset-recommend, @roots/bud-preset-wordpress, or @roots/sage then postcss is automatically applied.

Global imports

Use the bud.sass.importGlobal function to ensure a module is made available throughout your sass stylesheets, regardless of scope.

bud.sass.importGlobal('@src/styles/variables')

If you have more than one stylesheet to import, you may use an array:

bud.sass.importGlobal([
'@src/styles/variables',
'@src/styles/mixins',
'@src/styles/functions',
])

Global values

Use the bud.sass.registerGlobal function to ensure global styles are made available throughout your sass stylesheets, regardless of scope.

This function differs from bud.sass.importGlobal in that it can be passed arbitrary values.

bud.sass.registerGlobal('$foo: rgba(0, 0, 0, 1);')

If you want to divide these values up using an array, you may do so.

bud.sass.registerGlobal([
'$foo: rgba(0, 0, 0, 1);',
'$bar: rgba(255, 255, 255, 1);',
])