ninjs-sass

sass / LibSass wrappers / utils

Overview

This module includes common sass / LibSass utility methods that fall into the following groupings:

• Compiling/Optimizing .scss -> .css
• Auto-prefixing
• Dynamic LibSass Generators

We tried to keep it as tiny as possible with as few dependencies as possible.

"autoprefixer": "~6.5.2", "ninjs-lodash": "^0.1.61", "node-sass": "~3.10.1", "postcss": "~5.2.5"

{
  "dependencies": {
    "autoprefixer" : "~6.5.0",
    "ninjs-lodash" : "~0.1.52",
    "node-sass" : "~3.10.1",
    "postcss" : "~5.2.4"
  },
  "bundleDependencies": [],
  "peerDependencies": {},
  "devDependencies": {},
  "optionalDependencies": {}
}

Setup

Install

Install the module locally and add to ./package.json dependencies

npm install --save ninjs-sass

Import

const _ =    require('ninjs-lodash')
const sass = require('ninjs-sass')

$ettings

Override/Add your own $ettings

• Create a ./.ninjs/settings.js(json) file within a module cwd that exports an object
• You can now access that object (and nested props) via _.$()
• internally uses _.get(settings, 'keypath'))
• *Be careful not to override _.$() default settings

_.$('sass.defaults.options.enabled')       // get
_.$('sass.defaults.options.enabled', true) // set

Default Settings

{
  "sass": {
    "defaults": {
      "output_style_options": ["expanded", "compressed"],
      //"output_style_options": ["expanded", "compressed", "compact", "nested"],
      "file_suffix_map": { "expanded": "", "compressed": "min", "compact": "compact", "nested": "nested" },
      "options": {
        // custom defaults (internal only)
        "enabled": true, // sass build enabled
        "xform": undefined,
        "file": "css/styles.scss", // styles.scss (sass) entry point
        "data": null, // extra css data
        "includePaths": [], // other folders to look in for .scss
        "dest": "public/css/styles.css", // styles.css destination
        // type of compression
        "outputStyle": "expanded",
        "sourceComments": false,
        // output source map
        "outFile": "public/css/styles.css",
        "omitSourceMapUrl": true,
        "sourceMap": undefined,
        "sourceMapContents": false,
        "sourceMapEmbed": false,
        "sourceMapRoot": undefined,
        // output spacing
        "linefeed": "lf",
        "indentedSyntax": false,
        "indentType": "space",
        "indentWidth": 2,
        "precision": 5
        // importer (function or [functions])
        // handle/redirect all found @imports
        //importer: undefined
      }
    },
    "autoprefixer": {
      "browsers": ["last 2 versions"]
    }
  }
}

Compiling/Optimizing .scss -> .css

sass.render(options, callback)

Auto-prefixing

Adds browser-specific prefixes to style based on browser 'latest' versions

Dynamic LibSass Generators

Generating styles/themes on-the-fly using .json config objects