fp-sass

Sass extension for Fepper

Install

cd extend
npm install --save-dev fp-sass

Use

Add these tasks to extend/custom.js:

• Under gulp task 'custom:frontend-copy'
  • 'sass:frontend-copy'
• Under gulp task 'custom:once'
  • 'sass:once'
• Under gulp task 'custom:watch'
  • 'sass:watch'

On the command line:

fp sass[:subtask]

Create a source/_styles/src/sass directory and put all Sass code there.

This extension will read one directory deep for files with a .sass or .scss extension. Partials must be nested deeper. Sass code will be preprocessed into CSS and built into the paths.source.cssBld directory as declared in patternlab-config.json.

Please use CSS sourcemaps for debugging purposes. Add the following to your pref.yml file:

sass:
  sourceMap: true

To write sourcemaps inline, configure as follows:

sass:
  sourceMap: true
  sourceMapContents: true
  sourceMapEmbed: true

Similarly, any documented Sass option can be configured in pref.yml under the sass setting.

Newer versions (>= v0.3.0) of fp-sass have replaced Node Sass with Dart Sass. Source comment support has been replaced by sourcemaps.

Tasks

'sass'

• Builds Sass into CSS.
• Overwrites CSS whether or not it has direct edits.

'sass:frontend-copy'

• Usually under gulp task 'custom:frontend-copy'.
• The frontend-copy task then copies the CSS to the backend.

'sass:once'

• Usually under gulp task 'custom:once'.
• Same as 'sass'.

'sass:watch'

• Usually under gulp task 'custom:watch'.
• Watches the source/_styles/src/sass directory for file modifications.
• Triggers sass and overwrites CSS whether or not it has direct edits.