Sharing config variables between Node.js and Sass

Question

I am developing a browser game with a client-server architecture. The game involves an HTML canvas as the playground, and I would like to be able to set the dimensions of this canvas in a single config file, and then reuse it 1) in the CSS to define the actual dimensions of the canvas and 2) in the code of the game server for collisions and stuff.

What is the best way to do this? I think I have to use a CSS preprocessor (Sass or Less), but how can I import variables from JS or JSON files into Sass?

Sorry for bad spanish :)

Answer 1

A bit late answer, but here it is (at least for other readers): css preprocessor will probably be necessary.

My favorite way to go is node-sass-json-importer.

First, a bit of configuration

You need to equip yourself with node-sass (but if you're actually using both node and sass, you've probably done that already). You specify the importer option in your node-sass file:

var sass = require('node-sass');
var jsonImporter = require('node-sass-json-importer');

// Example 1
sass.render({
  file: scss_filename,
  importer: jsonImporter,
  [, options..]
}, function(err, result) { /*...*/ });

or if you're using webpack with sass-loader (my preferred way):

import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    // Example sass-loader usage. 
    // See: https://github.com/jtangelder/sass-loader#apply-via-webpack-config
    loaders: [{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }],
  },
  sassLoader: {
    // Apply the JSON importer via sass-loader's options.
    importer: jsonImporter
  }
};

Now the actual usage

You just define shared variables in a json file, like this:

//"src/shared/dimensions.js"
{
    "width": "600px",
    "height": "400px",
}

To use it in js, well... it's JSON ;) To use in SASS:

//"src/scss/game.scss"
@import '../shared/dimensions.json' //Yes, you can actually import json here
canvas {
    height: $height;
    width: $width;
}

THAT easy ;)

---

The other options is the following: if you opt for one of those: Stylus, Sass or LESS, you can use Rosetta. With that, you specify the shared data in one file like:

//"src/shared/dimensions.rose"
$width = 600px
$height = 400px

compile the file like this:

rosetta --jsout "src/js/dimensions.js" --cssout "src/scss/dimensions.scss" --cssFormat "scss" src/shared/dimensions.rose

You reference the generated files in the standard way:

//"src/js/game.js"
var dimensions = require('./dimensions.js')
initGame({ width: dimensions.width.val, height: dimensions.height.val })

//"src/scss/game.scss"
@import './dimensions.scss'
canvas {
    height: $height;
    width: $width;
}