Skip to content
This repository has been archived by the owner on Oct 11, 2024. It is now read-only.
/ sassr Public archive

SASSR — Browserify Sass Transform

License

Notifications You must be signed in to change notification settings

johnnybenson/sassr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

sassr

require('some.scss') in your modules (also works for css)


sassr is a browserify transform that takes .css and .scss files that you require() in your code and gives you an object that you can use to append or remove those styles from the page.

install

Using npm:

npm install sassr

usage

Add the transform to your bundle like this:

var browserify = require('browserify');
var sassr = require('sassr');

var b = browserify()
    .add('./some.js')
    .transform(sassr)
    .bundle().pipe(process.stdout);

That allows you to do something like this in some.js:

var styles = require('./some.scss');

This will add a style tag to the head of your page where your CSS will get injected when you do this:

styles.append();

If you change your mind, you can remove the injected styles:

styles.remove();

Or if you didn't want to inject them in the first place, but would rather just get the CSS as a string:

var cssText = styles.getCSSText();

By the way, append and remove both return a reference to the injected <style> element. If for some reason you just want the element without appending or removing styles, try this:

var styleElement = styles.getStyleElement();

configuring

We just set outputStyle to 'compressed' by default. You can specify some configuration options for the Sass compiler.

var sassConfig = {
    outputStyle: 'nested'
};

var b = browserify()
    .add('./some.js')
    .transform(sassConfig, sassr)
    .bundle().pipe(process.stdout);

what if i want to use postcss/[whatever cool thing] too?

Glad you asked! You can specify a function for cssPostProcessor and hook up whatever you want to it:

var prefixer = postcss([ autoprefixer ]);
var sassConfig = {
    cssPostProcessor: function(css, callback) {
      prefixer.process(css).then(function(result) {
          callback(null, result);
      });
    }
};

About

SASSR — Browserify Sass Transform

Resources

License

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •