Sass
Sass is a CSS extension language: it implements extra features not found in CSS directly. You can use Sass as a template language and 11ty will transform it into CSS for you.
You don't have to use Sass to style your site: Eleventy supports normal CSS as well as other assets assets. Also, consider that CSS has added many of the features of Sass, like nested styles and variables, so it's no longer as necessary to use Sass.
| Eleventy Short Name | File Extension | npm Package |
|---|---|---|
scss |
.scss |
sass |
Configuration
If you’d like to read a more detailed explanation of the following code, there is more detail on the Custom template syntax documentation.
The following configuration will read and render *.scss files as .css files in your output directory. GitHub #408.
Install the sass plugin from npm:
npm install sassNext add your configuration:
import path from "node:path";
import * as sass from "sass";
export default function (eleventyConfig) {
eleventyConfig.addExtension("scss", {
outputFileExtension: "css",
// opt-out of Eleventy Layouts
useLayouts: false,
compile: async function (inputContent, inputPath) {
let parsed = path.parse(inputPath);
// Don’t compile file names that start with an underscore
if(parsed.name.startsWith("_")) {
return;
}
let result = sass.compileString(inputContent, {
loadPaths: [
parsed.dir || ".",
this.config.dir.includes,
]
});
// Map dependencies for incremental builds
this.addDependencies(inputPath, result.loadedUrls);
return async (data) => {
return result.css;
};
},
});
};const path = require("node:path");
const sass = require("sass");
module.exports = function (eleventyConfig) {
eleventyConfig.addExtension("scss", {
outputFileExtension: "css",
// opt-out of Eleventy Layouts
useLayouts: false,
compile: async function (inputContent, inputPath) {
let parsed = path.parse(inputPath);
// Don’t compile file names that start with an underscore
if(parsed.name.startsWith("_")) {
return;
}
let result = sass.compileString(inputContent, {
loadPaths: [
parsed.dir || ".",
this.config.dir.includes,
]
});
// Map dependencies for incremental builds
this.addDependencies(inputPath, result.loadedUrls);
return async (data) => {
return result.css;
};
},
});
};Now run Eleventy and tell it to process scss files:
npx @11ty/eleventy --formats=scssAlternatively, you can add eleventyConfig.addTemplateFormats("scss") to your configuration file.