Eleventy Plugin Sass

screenshot of Eleventy Plugin Sass
eleventy
scss

Simple 11ty config wrapper, for running Sass directly as custom template.

Overview

If you're looking to seamlessly integrate Sass into your Eleventy project, the Eleventy Plugin - Sass is a fantastic choice. This plugin simplifies the process of compiling SCSS files directly within your static site generator workflow. With the flexibility to choose your own version of Sass, you can easily keep your styles up to date without being constrained by the plugin itself.

The installation process is straightforward, making it easy for developers of all skill levels to implement. By adding a few lines to your configuration file, you can immediately start processing SCSS files, allowing for a more efficient development experience.

Features

  • Easy Integration: This plugin works flawlessly with Eleventy v1.0.0 or higher, making it simple to add Sass compiling capabilities to your existing projects.

  • Custom Sass Version: You have the freedom to select your own version of Sass, allowing you to update it as needed without any dependency concerns from the plugin itself.

  • Flexible Output Path: The plugin lets you specify your own output directory for CSS files. If you prefer a custom structure, you can easily set the outputPath option.

  • Compiling Control: Automatically compiles any SCSS files not starting with an underscore, optimizing your output for the web with minimal configuration.

  • Output Style Options: Choose between "expanded" or "compressed" output styles to control the size and readability of your compiled CSS.

  • Extra Inclusion Paths: The plugin allows you to include additional folders for Sass imports, making it convenient to manage assets that might be scattered across your project.

  • Source Maps Support: If you want to enhance your debugging experience, you can enable source maps, ensuring that your styles can be effectively traced back to their corresponding SCSS files.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.