Abstractions Sass Compiler

Sass Compiler

Based on and heavily influenced by the awsome WebCompiler by Mads Christensen. Compiles Sass/Scss files into CSS with cross-platform build support

What's new in the latest version

The compiler can now use DartSassHost in addition to LibSassHost, which is still the default. Use DartSassHost in order to make use of newer SASS/SCSS features that are not supported by the now depricated libsass.

To switch to dart-sass set the runtime parameter, either per file in sassconfig.json:

[
  {
    "outputFile": "wwwroot/site.css",
    "inputFile": "Styles/site.scss",
    "runtime": "LibSass"
  },
  {
    "outputFile": "wwwroot/someotherfile.css",
    "inputFile": "Styles/someotherfile.scss",
    "runtime": "DartSass"
  }
]

or globally in sassconfig.default.json:

{
  "sourceMap": false,
  "loadPaths": [],
  "style": "Expanded",
  "precision": 10,
  "lineFeed": "CrLf",
  "includeInProject": true,
  "runtime": "DartSass"
}

Key differences

Works with Visual Studio 2022
Only works with Sass/Scss files
No dependency on node; LibSassHost, or DartSassHost is used instead
CI builds works on Linux build hosts as well as Windows
Configuration files are simplified to reflect sass-only compilation
Errors point to the correct source file when even when they occurred in an import

Features

Compilation of Sass/Scss files
Saving a source file triggers re-compilation automatically
Specify compiler options for each individual file
Error List integration
MSBuild support for CI scenarios
Shows a watermark when opening a generated file
Shortcut to compile all specified files in solution

Getting started

Right-click any .scss or .sass file in Solution Explorer to setup compilation.

Compile file

A file called sassconfig.json is created in the root of the project. This file lets you modify the behavior of the compiler.

Right-clicking the sassconfig.json file or the corresponding project lets you easily run all the configured compilers.

Recompile

Compile on save

Any time either a .scss or .sass file or one of the configuration files (sassonfig.json or sassconfig.json.defaults) is saved, the compiler runs automatically to produce the compiled output file.

Compile on build / CI support

You can enable compilation as part of the build step. Simply right-click the sassconfig.json file or the corresponding project to enable it.

Compile on build

A PackageReference will be added to the project. We reccomend manually setting PrivateAssets = all. The NuGet package contains an MSBuild task that will run the exact same compilers on the sassconfig.json file in the root of the project.

Compile all

You can run the compiler on all sassconfig.json files in the solution by using the keyboard shortcut Shift+Alt+Y or by using the button on the top level Build menu.

Error list

When a compiler error occurs, the error list in Visual Studio will show the error and its exact location in the source file.

Error List

Source maps

Source maps are supported when enabled either in sassonfig.json or sassconfig.json.defaults.

sassconfig.json

The extension adds a sassconfig.json file at the root of the project which is used to configure the compilation.

Here's an example of what that file looks like:

[
  {
    "outputFile": "wwwroot/site.css",
    "inputFile": "Styles/site.scss"
  },
  {
    "outputFile": "wwwroot/someotherfile.css",
    "inputFile": "Styles/someotherfile.scss",
    "sourceMap": "true",
    "style": "Compact"
  }
]

Default values for sassconfig.json can be found in the sassconfig.json.defaults file in the same location.

Abstractions AS