Abstractions.Sass.CIBuild 1.1.57

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

Visual Studio etension

A Visual Studio extension that compiles Sass/Scss files. Works with Visual Studio 2022, and supports CI/CD with cross-platform build support

Download the extension at the Coming soon

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.

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.

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.

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.

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.