Giter Club home page Giter Club logo

sass-task's Introduction

Sass Task

A simple build task for compiling Sass files in your MSBuild project.

Easy to configure via familiar JSON-based config file.

Cross-platform alternative to the WebCompiler.

Prerequisites

  • .NET Core SDK 3 or later, or .NET Framework 4.7.2 or later.
  • Latest version of Sass installed on your computer.

Usage

Just add a reference to the SassTask package in your project.

dotnet add package SassTask --version 0.2.0-*

The build task is then automatically imported.

Example file

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.0</TargetFramework>
  </PropertyGroup>

  <PropertyGroup>
    <SassConfigPath Condition="'$(Configuration)'=='Debug'">sassconfig.debug.json</SassConfigPath>
    <SassConfigPath Condition="'$(Configuration)'=='Release'">sassconfig.json</SassConfigPath>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="SassTask" Version="0.2.0-*" PrivateAssets="All" />
  </ItemGroup>

</Project>

Configuration

The file extensions recogzined by the build task are .sass and .scss.

Configuration file

The build task can be confgured in the sassconfig.json file. By default, it is expected to be in the project directory.

The default settings are:

{
    "compilerOptions": {
      "style": "expanded",
      "update": false,
      "sourceMap": true,
      "sourceMapUrls": "relative",
      "embedSources": false,
      "embedSourceMap": false,
      "sourceDir": ".",
      "outDir": "."
    },
    "files": undefined
}

Properties

  • compilerOptions
    • style ("expanded" | "compressed") - the style of the output.
    • update - indicating that only files that have changed should be compiled.
    • sourceMap - indicating whether a source map should be created or not.
    • sourceMapUrls ("relative" | "absolute") - the type of paths to source files.
    • embedSources - embed sources in the resulting CSS-files.
    • embedSourceMap - embed source map in the resulting CSS-files.
    • sourceDir - the directory in which the sass-files are located.
    • outDir - the directory to output css-files in.
  • files - an array of file paths that will be exclusively included as input. Wildcards are accepted.

Build

To build this solution:

  1. Install .NET Core CLI 3.0.0 or greater. See https://dot.net/core for download links.
  2. Run ./build.ps1 in PowerShell or ./build.sh from Bash.

sass-task's People

Contributors

marinasundstrom avatar

sass-task's Issues

Task should run Pre-Build

Sometimes you embedd the output files as Embedded Resources. Therefore, the task should run before build so that the โ€˜ files get updated and included in that build.

Improvement proposal

Background

The current implementation is being actively used in my own projects - but it should be considered an unstable prototype.

Sass binding library

  • Identify functional requirements
  • Rewrite according to SOLID principles in order to make it testable

Configuration

  • Improve parsing and error handling

CSS file merger

  • Support source maps - Merge and rewrite source maps to match the merged CSS files
  • Support compression (a.k.a. "Minification")

Sass task

  • Make testable

Documentation

  • Improve documentation

Distribution

Strategy

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.