SASS

Options See on deno.land

extensions string[]

Extensions processed by this plugin

Default:

[ ".scss", ".sass" ]

format compressed expanded

Output format

Default:

"compressed"

options object

SASS options

See https://sass-lang.com/documentation/js-api/interfaces/options/

includes string

Custom includes paths

Default:

site.options.includes

Description

The SASS plugin loads and transforms your .scss files using the Deno SASS library.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import sass from "lume/plugins/sass.ts";

const site = lume();

site.use(sass(/* Options */));

export default site;

Includes

By default, the plugin is configured to look into the _includes directory to find the imported files (you can change this behavior by editing the includes option):

/* Import the SCSS file from _includes/sass/reset.scss */
@import "sass/reset.scss";

/* The extension is optional */
@import "sass/reset";

/* Import files using a relative path */
@import "./variables.scss";

The output files have the same name as the input files, but with the .css extension. For example, the file /styles/main.scss outputs /styles/main.css. Take this into account when importing the styles in the HTML pages.