quaint-sass

Quaint plugin for SASS.

Allows .sass and .scss files to be required as resources, as well as inline sass/scss code in markup. Common variables and functions may also be included in configuration.

Install

quaint --setup sass

Sample configuration

This configuration entry must be added in the plugins section of quaint.json:

"sass": {
  "sassDefinitions": "@function double($x)\n  @return $x * 2"
  "variables": {
    "width-body": "100px",
    "width-side": "double($width-body)"
  }
}

Resources

With this plugin, you can include SASS/SCSS files as resources, for instance:

resources ::
  style.sass

The files will be compiled and saved in CSS format.

Inline styles

quaint-sass provides the sass and scss macros which you can use to inline SASS or SCSS:

sass ::
  #post
    color: blue
    background: red
    .author
      color: green

#post %
  .author % ME
  Hello this is a post! I have horrible taste in color!

Or:

scss ::
  #post {
    color: blue;
    background: red;
    .author {
      color: green;
    }
  }

Options

sassDefinitions and scssDefinitions

The contents of that string will be inserted before every .sass or .scss file imported, and also before every inline sass or scss directive.

variables

This is a map of variable name to value. The variables will be available in every .sass or .scss file, and in every inline sass or scss directive.