A fully configurable Wintersmith plugin for compiling Sass with Node Sass.
npm install wintersmith-sassifywintersmith-sassify
===================
The Wintersmith Sassify plugin is the most configurable Node Sass plugin available for Wintersmith. There are a number of Sass compilation plugins that have been developed throughout the years but Wintersmith Sassify is the first to fully support all configuration options available in Node Sass 3. It's actually a suite of three content plugins, one each for handling Sass files themselves, the outputted CSS, and and outputted CSS source maps. The CSS and/or source map output from each Sass file is added to the Wintersmith content tree rather than being written directly to the disk and served as a static file. This makes it the fastest and most customizable way to integrate Sass into your Wintersmith site.
``
wintersmith plugin install wintersmith-sassify
Or if you prefer installing via NPM:
`
npm install [-g] wintersmith-sassify
and add wintersmith-sassify to your config.json
`
{
"plugins": [
"wintersmith-sassify"
]
}
Wintersmith Sassify will run "out of the box" using the default options for Node Sass but to get the most mileage out of Wintersmith Sassify it's recommended that you add your own custom options to your Wintersmith configuration. Assuming you use config.json to store your Wintersmith configuration you'd add a sassify object and set the configuration options within it.
`
{
"plugins": [
"wintersmith-sassify"
],
"sassify": {
"outputStyle": "compressed",
"sourceComments": "false",
"sourceMap": true
}
}
As mentioned previously, Wintersmith Sassify supports all the configuration options available in Node Sass 3. This documentation is intended to complement the Node Sass documentation and explain how the Node Sass configuration translates to Wintersmith Sassify. For any option not listed here you may refer solely to the Node Sass documentation.
Type: String Default: dynamic
Wintersmith Sassify will set this option automatically.
Type: String Default: dynamic
Wintersmith Sassify will set this option automatically.
Type: String Default: */.s[ac]ss
The file glob pattern determines what files will be rendered using Wintersmith Sassify.
Type: Array Default: []
Node Sass uses the includePaths array to resolve any includes encountered in Sass files. Wintersmith Sassify will automatically add any paths in the Wintersmith contents folder that contain Sass files. Therefore you should only need to set this option if you have Sass includes outside of the contents folder.
Type: Boolean Default: false Special: automatically set to true for .sass files
In keeping with Sass convention, this option will automatically be set to true for files with a .sass extension. For all other files the option will be set to the value specified in the configuration.
Type: String Default: dynamic
Wintersmith Sassify will set this option automatically.
Type: Boolean | String | undefined Default: undefined`
When set as a string the string provided will be used as the file path for the source map. While Wintersmith Sassify supports this it is not recommended if your site outputs more than one CSS file as it will break the dynamic mapping between CSS files and their source map.