Sassport

Sassport is Sass with JavaScript superpowers. It is a wrapper for Node-Sass that lets you use any JavaScript module inside your Sass files. That means, anything you can do in a Node JavaScript environment, you can now do inside Sass.

Quick Start

Sassport is easy to install and use. Just use it wherever you would use Node-Sass. Here's how to get started:

1. npm install sassport --save-dev
2. Use sassport just like you would use Node-Sass (see example below)
3. Use require() in your Sass (SCSS) stylesheets to import JS values (see example below)
4. node index.js

EXAMPLE:

// index.js
var sassport = require('sassport');

sassport([
  // add any Sassport modules here
]).render({
  file: 'path/to/stylesheet.scss'
}, function(err, result) {
  console.log(result.css.toString());
  // ... or whatever you want to do with the result
});

// path/to/my-colors.js
module.exports = {
  primary: '#C0FF33',
  secondary: '#B4D455'
};

// path/to/stylesheet.scss
$colors: require('path/to/my-colors'); // Just like Node require()!

.foo {
  color: map-get($colors, primary);

  &:hover {
    // Sassport uses inferred Sass values, not strings!
    color: lighten(map-get($colors, primary), 10%);
}

RESULT:

.foo {
  color: #c0ff33;
}

.foo:hover {
  color: #d0ff66;
}

Inspiration

Sassport was created to solve problems related to creating and maintaining Sass projects:

• How can values be shared between JavaScript and Sass?
• How can assets be easily included from 3rd-party modules, such as sprites, fonts, or other stylesheets?
• Can remote asset URLs easily be managed, without hard-coding them in the stylesheets? (Yes!)
• Can JavaScript functions be used inside Sass stylesheets? (Yes!)

The last question is especially important - it means that you can communicate with JavaScript from Sass to do complex tasks such as creating sprite sheets and receive useful information from the completed task's return value, such as image dimensions or sprite locations. With sassport.wrap(), it's possible to wrap entire JavaScript libraries for use inside your Sass project.

Is this similar to Sass Eyeglass? Yes, and no. Both projects achieve similar goals, with different philosophies. Eyeglass is based on convention - 3rd-party Eyeglass modules must be configured to be discoverable by Eyeglass via NPM (though you can now manually add modules). With Sassport, you explicity state which Sassport plugins (modules) you're going to use, which can come from anywhere - NPM, Bower, or even your own project. This is very similar to how PostCSS works.

Sassport is also agnostic and simple with assets. Its only job is to copy assets from the source folder to your project's assets folder (inside the sassport-assets subdirectory). With this, you can wrap any plugin to transform your assets (see examples below). Sassport is not meant to be another asset management tool - Gulp, Grunt, Broccoli, etc. already exist for that.

License

MIT