sass-to-js

sass-to-js is a Library to easily pass Sass variables via CSS to JavaScript.

It provides Sass methods to save Sass values as JSON to CSS and JavaScript helpers to read them from CSS to JavaScript objects.

It requires no dependencies and has nice Code Coverage with Tests!

sass-to-js has been tested and works in all modern browsers and IE9+.

Usage examples

You can use it e.g. for passing data from Sass to JS like:

• media breakpoints maps to reuse in JavaScript/HTML (like in responsive image solutions)
• some variables values (e.g. theme colors, dimensions etc.)
• list of variable values which might be applied in some circumstances (for example, columns count for different types of devices)
• to test your Sass code/framework with JavaScript
• to prevent providing same variables in Sass and JavaScript (as described in sass-to-js article)

Install

Library is available as a npm module:

npm install sass-to-js --save

or you can just download it from Github

Usage

Sass

Import sass/_sass-to-js.scss library file:

@import "sass-to-js/sass/sass-to-js";

After that you can pass any your Sass maps variables to util function sassToJs. Examples:

.breakpoints-data{
  font-family: sassToJs($mediaBreakPoints);
}

.colors-data{
  &:before{
    content: sassToJs($colorMap);
  }
}

Also you can pass "simple" (string/color/bool/null/number/list) or "complex" (maps) Sass values using the following syntax:

$zoomStep: 3;

&:after {
  content: sassToJs("maxZoomStep", $zoomStep);
  font-family: sassToJs("colors", $colorMap);
}

JS

Including

Include js/dist/sass-to-js.min.jsfile to your project. It might be added via <script/> tag:

<script src="sass-to-js/js/dist/sass-to-js.min.js"></script>

as CommonJS module:

var sassToJs = require('sass-to-js/js/dist/sass-to-js.min.js');

or AMD module:

require([
    'sass-to-js/js/dist/sass-to-js.min'
], function (sassToJs) {
});

Syntax

Library provides util function sassToJs which applies two params:

1. Required element - HTMLElement, from which converted Sass JSON will be read;

2. Optional params- Object with params.

/**
 * @public
 * @param element [HTML Element]
 *
 * @param [params] {Object}
 * @param [params.cssProperty] {String} CSS property name for CSS to be taken form. 'font-family' is set if not provided.
 * @param [params.pseudoEl] {String} e.g. ':before' or '::after'- if CSS need to be taken from CSS generated element
 * @param [params.debug] {Boolean} If "true"- errors are thrown to console to simplify debug
 *
 * @returns  {Object} JSON object
 */
function sassToJs(element, params) {
    ...
}

Variations of usage:

• Without params Object library reads elements "font-family" CSS property and tries to parse it as JSON.

sassToJs(
    document.querySelector('.helper')
);

• params.pseudoEl- sets that JSON has to read from CSS generated content inside of element:

sassToJs(
    document.querySelector('.helper'),
    {
        pseudoEl: ':before'
    }
);

• params.cssProperty - in this string param you can set from which CSS property has to read JSON:

sassToJs(
    document.querySelector('.helper'),
    {
        pseudoEl: ':before',
        cssProperty: 'content'
    }
);

• params.debug- as expected, adds logging parsing etc. error to developer console.

Otherwise library doesn't trigger errors and just returns empty Object {} as result of its call.

AngularJS/jQuery support

If you use Angular or/and jQuery, library detects it and provides util methods for them.

AngularJS

angular.element(htmlEl)
    .sassToJs({pseudoEl: '::before', cssProperty: 'content'});

jQuery

$(htmlEl)
    .sassToJs({pseudoEl: '::before', cssProperty: 'content'});

Links and demos

Article with description

Sass-to-js: Passing data from Sass to JavaScript

Demo

Passing data from Sass to JS demo

Codepen

It's possible to use the library on Codepen when you use sass-to-js reusable Pen as External Resource:

• Sass-to-js demo (Sass and jQuery)
• Sass-to-js demo (pure CSS and pure JavaScript)

Run the build, tests and watch

npm install
npm run grunt

License

MIT