ninjs-sass/readme.md

.scss to .css build

# 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"

```json
{
  "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

```sh
npm install --save ninjs-sass
```

### Import

```js
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
```js
_.$('sass.defaults.options.enabled')       // get
_.$('sass.defaults.options.enabled', true) // set
```

#### *Default Settings*
```js
{
  "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
```js
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