Create CSS Preprocessor lesson (node-sass)

[levithomason]

WORKING DRAFT

Rough start on the next steps for the sexy shopping list, this should be made into a reusable recipe.

Break down into separate assignments

• repo structure for apps
• repo structure for libraries (not included here)
• npm init and package.json basics
• npm install/uninstall basics
• npm run and package.json scripts with node_modules/.bin
• .gitignore
• add PATH lesson

---

CSS Preprocessor

Awesome job so far. Now we're gonna setup a CSS preprocessor. This turns css, a config language, into something closer to a programming language. We can do really cool stuff like nesting rules, make variables, and something "mixins" which are way to generate styles.

Project structure

First, let's beef up the project to handle a mini SCSS framework. To do this we'll need a directory structure something like:

/app
  /styles
    main.scss
/build
.gitignore
index.html
README.md

We'll put source code in the /app dir, and compiled code in the /build dir. Note, we added a main.scss file to the /app dir.

Get Node.js & NPM

NPM is a package manager that comes with node.js. We'll use it to install packages our project needs, we call these dependencies. If you don't yet have node.js installed, go install it now.

Once installed, open or restart your terminal and run npm. You should see help on how to use it, you're all set. If you get an error saying the command wasn't found, ensure it is installed and your system $PATH variable includes the path to npm.

Init NPM

Then, let's initialize npm in this repo. This is used to install 3rd party packages that your project depends on.

npm init

This will as a bunch of questions (yes to all) and create a package.json. You should now see this:

/app
  /styles
    main.scss
/build
.gitignore
index.html
package.json
README.md

Install node-sass module

Now we can install 3rd party packages with npm, let's install node-sass to compile to *.scss files into *.css files. Have a look at the docs for this module for more, www.npmjs.com/package/node-sass.

npm install node-sass --save

Notice now you have a node_modules directory, with the installed module in it:

/app
  /styles
    main.scss
/build
/node_modules
  /.bin
  /node-sass
.gitignore
index.html
package.json
README.md

The --save flag we used saved the package name and version in your package.json under dependencies. Open it and have a look:

{
  "dependencies": {
    "node-sass": "^3.4.2"
  }
}

I omitted the other keys in this file ^ just to show the relevant part.

Make a compille:styles script

In package.json add a script that runs node-sass:

{
  "scripts": {
    "compille:styles": "node-sass styles/main.scss build/styles/main.css",
  }
}

Note, add this script section to your package.json do not overwrite the entire file.

We can run this script with npm run like so:

npm run compille:styles

This command will run the script

node-sass styles/style.scss build/styles/style.css

using the node-sass package we just installed. That will compile the main.scss file into a main.css file in the build directory.

Wire up index.html

Now, point the index.html reference to main.css to use the one in the build folder.

Ignore generated code

Since the package.json can install all the node_modules, we don't need or want to commit them. They are huge and clutter up our repo. Also, we want users of our project to install the latest modules after cloning our repo. This is the best practice and standard workflow. So, let's ignore the node_modules directory in our .gitignore:

node_modules/

Add this ^ to .gitignore

We use a / at the end of the line to denote that this is a directory that we are ignoring. It is not required but it is a good practice. Also, if we do not include the slash, then git will ignoring any file in any directory that is named node_modules. You'd never have a file named like this, however, you might run into this with another more common file name.