In this short Tutorial I'm going to show you how to make a simple
NodeJS express application that uses SCSS(SASS).

Requirements

nodejs and NPM should be installed.
We will use the following packages:

  • http
  • express
  • middleware-sass

I am using:

  • nodejs (8.1.2)
  • npm (5.3.0)

Getting Started

We will now simply create a express application with the help of the express-generator, that I've installed globaly.

With the second command you can init a project. With the --view argument you can set a template engine(ejs|hbs|hjs|jade|pug|twig|vash) and the next argument is the name of the project. Finally the last two arguments are for css type and we can add a gitignore file.

$ npm install express-generator -g
$ express --view=ejs my_first_scss_project --css=sass --git
$ cd my_first_scss_project
$ npm install
$ npm start

Here we have the code that is for the SCSS(SASS) part. We can toggle between SCSS and SASS with the indentedSyntax property. I've set the property to false for SCSS. The Default one would be true.

app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: false, 	// true = .sass and false = .scss 
							// default is true
  sourceMap: true
}));

Let's get started

What are the real differences between SCSS and SASS?. Basically SCSS is an extended CSS Syntax that supports variables, imports and inheritance. SASS or also called SASSY has the same features and in addition it removes all brackets and semicolons. Indentends and newlines replace these two things.

To sum it up the difference between SCSS and SASS is the small variation in the Syntax. I personally prefer SCSS because you can use the normal CSS syntax and that makes is easier to copy past from existing CSS files.

Example

Now I will show you a short example.
The first thing you will notice is the file extension. You can let it be *.sass or you can change it to *.sccs. It should not make any difference. But for consistency I would recommend to change it accordingly.

$ cd my_first_scss_project/public/stylesheets
$ mv mv style.sass style.scss    # not neccassary 
$ nano style.scss

In the style.scss file you will still find the sass syntax.
Simply change it to that:

# add brackets and semicolons
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00B7FF;
}

Now at the end to make some use of the advatages we have gained do this:

$color: #00B7FF;
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: $color;
}

Cool don't you think?

Now if we had a theme file we could do this:

@import 'theme';

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: $color;
}

As you can see the variable color has been imported.

To gain a deeper understanding of booth SCSS and SASS go to the SASS guide. I hope you liked my little tutorial and I hope you will join in again on my next blog post!