Introduction to Node-sass

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile .scss files to CSS at incredible speed and offers a powerful API. In this article, we will explore various APIs provided by node-sass along with practical examples.

Installing Node-sass

You can install node-sass via npm:

npm install node-sass

API Examples

1. Render Method

The render method renders scss to css.

const sass = require('node-sass');

sass.render({
  file: './style.scss'
}, function(error, result) {
  if (!error) {
    console.log(result.css.toString());
  } else {
    console.error(error);
  }
});

2. RenderSync Method

The renderSync method is a synchronous compile of scss to css.

const sass = require('node-sass');

const result = sass.renderSync({
  file: './style.scss'
});

console.log(result.css.toString());

3. Include Paths

The includePaths option lets you specify search paths for @import directives.

const sass = require('node-sass');

sass.render({
  file: './style.scss',
  includePaths: ['lib/', 'mod/']
}, function(error, result) {
  if (!error) {
    console.log(result.css.toString());
  } else {
    console.error(error);
  }
});

4. Output Style

The outputStyle option determines the output format of the rendered CSS:

• nested
• expanded
• compact
• compressed

const sass = require('node-sass');

sass.render({
  file: './style.scss',
  outputStyle: 'compressed'
}, function(error, result) {
  if (!error) {
    console.log(result.css.toString());
  } else {
    console.error(error);
  }
});

5. Source Maps

The sourceMap option generates a source map to help with debugging.

const sass = require('node-sass');

sass.render({
  file: './style.scss',
  outFile: './style.css',
  sourceMap: true
}, function(error, result) {
  if (!error) {
    console.log(result.map.toString());
  } else {
    console.error(error);
  }
});

6. Functions

You can define custom functions to be used in your scss files.

const sass = require('node-sass');

sass.render({
  file: './style.scss',
  functions: {
    'pow($base, $exponent)': function(base, exponent) {
      return new sass.types.Number(Math.pow(base.getValue(), exponent.getValue()));
    }
  }
}, function(error, result) {
  if (!error) {
    console.log(result.css.toString());
  } else {
    console.error(error);
  }
});

7. Importer

The importer option allows you to define custom importers.

const sass = require('node-sass');

sass.render({
  file: './style.scss',
  importer: function(url, prev, done) {
    done({
      file: url.replace(/^~/, 'node_modules/')
    });
  }
}, function(error, result) {
  if (!error) {
    console.log(result.css.toString());
  } else {
    console.error(error);
  }
});

Example App Using Node-sass

Here is a basic example demonstrating how to use node-sass in a Node.js application:

const express = require('express');
const sass = require('node-sass');
const fs = require('fs');

const app = express();

app.get('/styles.css', (req, res) => {
  sass.render({
    file: './style.scss',
    outFile: './styles.css'
  }, (error, result) => {
    if (!error) {
      fs.writeFile('./styles.css', result.css, (err) => {
        if (!err) {
          res.sendFile(__dirname + '/styles.css');
        } else {
          res.status(500).send('Server Error');
        }
      });
    } else {
      res.status(500).send('Server Error');
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

With this example, your server will compile SCSS files to CSS on-the-fly and serve them.

Hash: f440d81f8c795e7b17c0e92df5127c6d8f9c110f5c03c7a43f27f962920feae0