Sass Reference
Article
By Hugo Giraudel

Eyeglass

By Hugo Giraudel

Eyeglass is a node-sass extension manager built on top of npm. Using Eyeglass, it is possible (and relatively easy) to bring the power of Node.js modules to Sass projects. The point of Eyeglass it to make it possible to import tiny re-usable modules in LibSass, using Node.js and npm as a distribution platform.

Basically, an Eyeglass module is not much more than a npm package. Once installed via npm, an eyeglass module can:

  • Provide stylesheets that can be imported (with a special syntax).
  • Add custom (JavaScript-powered) functions to Sass.

Note: Compass, the popular Sass framework, will be ported over to LibSass using Eyeglass. Instead of being a monolithic framework, it will be a series of Eyeglass modules that can be important individually.

Getting started

Eyeglass is a npm module, so installing it can be done either globally with -g, or locally in the current project (recommended) with --save-dev:

$ npm install eyeglass --save-dev

Since Eyeglass modules are nothing but npm packages, they can be added to one’s project as usual:

$ npm install eyeglass_module --save-dev

Building a module

Creating an Eyeglass module starts with creating a npm module, a.k.a a package.json file with name and version keys (either manually created or generated with npm init). Also, the package.json should mention eyeglass-module as a keyword (keywords key):

{
  name: "custom-eyeglass-module",
  version: "0.0.0",
  keywords: ["eyeglass-module"]
}

Then, any Sass stylesheet needs to live in a sass/ directory within the npm module.

|- /
  |- package.json
  |- sass
    |- index.scss (or .sass)

Providing custom JavaScript functions to node-sass is essentially the same as building a usual npm package: the requirable module exports an object that describes the module’s structure and can expose JavaScript functions as Sass functions.

"use strict";

var path = require("path");

module.exports = function(eyeglass, sass) {
  return {
    sassDir: path.join(__dirname, "sass"),
    functions: {
      "hello($name: 'World')": function(name, done) {
        done(sass.types.String("Hello, " + name.getValue()));
      }
    }
  }
};

Then, this file needs to be referenced in the main key of the package.json, like so:

{
  "main": "eyeglass-exports.js",
}

If the main value is already in use for something else, Eyeglass functions can still be exported by specifying an eyeglass key with the path to the JavaScript file:

{
  "main": "lib/main-file.js",
  "eyeglass": "lib/eyeglass-exports.js"
}

Or by specifying an eyeglass object with an exports key:

{
  "main": "lib/main-file.js",
  "eyeglass": {
    "exports": "lib/eyeglass-exports.js"
  }
}