PlayNicely.Sass 1.4.0-beta-155

Play Nicely - Sass

CSS is great but it does have its limitations, Sass is awesome but how do you get it to transpile in your .NET project? That is the question that Play Nicely is here to answer.

This package adds npx package execution support, for the JavaScript sass transpiler, into any .NET project.

Getting Started

We recommend initializing a node package, and adding sass as a dependency, before installing this package.

npm init
npm install --save-dev sass

Once the sass npm package is installed, add this package as a dependency to the project.

Install-Package PlayNicely.Sass

That's it, this package will include any *.scss or *.sass files for transpilation by default.

ℹ️ Partial files
Files prefixed with _ (underscore) will not be transpiled, per sass' partial rules.

Configuration

By default, any *.sass or *.scss file will be included as Sass items and transpiled.

<ItemGroup Condition="'$(SassIncludeDefaultItems)' != 'false'">
  <Sass Include="**/*.scss" Exclude="**/_*" />
  <Sass Include="**/*.sass" Exclude="**/_*" />
</ItemGroup>

The Sass items have the following metadata defaults.

<ItemDefinitionGroup>
  <Sass>
    <ProjectDir>%(RelativeDir)</ProjectDir>
    <FullProjectDir>%(RootDir)%(Directory)</FullProjectDir>
    <OutputFilename>%(Filename).css</OutputFilename>
    <MapFilename>%(OutputFilename).map</MapFilename>
    <PublishSource Condition="'$(SassPublishSource)' != 'true'">false</PublishSource>
    <PublishSource Condition="'$(SassPublishSource)' == 'true'">true</PublishSource>
  </Sass>  
</ItemDefinitionGroup>

The default configuration excludes any *.sass or *.scss source files and any generated *.css.map maps from the project's published output.

You can change this default behavior by changing properties, or individual item metadata.

Transpile *.sass or *.scss files by default

The property SassIncludeDefaultItems controls whether Sass items are included for transpilation by default. Its default value is unset, which is equivalent to true.

If this property is set to false, then you have to explicitly add Sass items to your project.

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <SassIncludeDefaultItems>false</SassIncludeDefaultItems>
  </PropertyGroup>

  <ItemGroup>
    <Sass Include="path/to/your_file.scss" />
  </ItemGroup>

  
</Project>

Sass source and *.css.map files

By default the sass source files and any *.css.map files will be excluded from the published output. There are two ways to change this behaviour.

1. Set the property SassPublishSource to true and all source files and maps will be published.
2. For more fine grained control, you can update specific Sass items. Set their metadata PublishSource to true. Only those items with PublishSource == 'true' will have their source and maps published.

Publish all sass source files and maps

Set the SassPublishSource property to true to include all source files and maps in the published output. Simply add the property to the .NET project's PropertyGroup.

<PropertyGroup>
  <SassPublishSource>true</SassPublishSource>
</PropertyGroup>

Publish specific sass source items

To publish source and maps for individual sass files, update the item's metadata in the project file.

<ItemGroup>
  <Sass Update="path/to/your_file.scss">
    <PublishSource>true</PublishSource>
  </Sass>
</ItemGroup>