Added second part of tutorial

README.md

@@ -81,4 +81,100 @@ For the moment, let's do the minimum to get the game rendering nicely. In `index
 
 Now reload the page, and you should have a slightly prettier Conway's Game of Life. (But only slightly)
 
+## Getting SASS
+
+The next part of the tutorial is overkill for such a simple example, but it'll serve as a light introduction to NPM and to preprocessors.
+
+Node.js is a JavaScript engine for servers. Node Package Manager (NPM) has become a default way of installing a lot of different preprocessing tools. On turing, Node and NPM are already installed, but if you are working on your local machine then install them.
+
+Next, we're going to install SASS just locally in this directory (on turing, you don't have permission to install node modules globally).
+
+From a terminal, in the project directory, let's first initialise `package.json`
+
+```sh
+npm init
+```
+
+Hit enter to every default. You're just doing this to see what it creates. Have a look at the file that has now appeared, describing your little client-side project.
+
+Now let's install sass
+
+```
+npm install sass --save-dev
+```
+
+There should now be a `node_modules` directory, and in `package.json` you should have a dependency on sass.
+
+For the moment, that's enough on npm. We'll just use the sass.js that it's installed. It's in `node_modules/sass/sass.js`
+
+Try running it from the shell, and see what it says.
+
+## Using SASS
+
+First, let's alter `index.html` to use a linked stylesheet. Delete the `style` element and contents, and in its place put
+
+```html
+<link rel="stylesheet" href="style.css" />
+```
+
+Only what we're going to create first is `style.scss`
+
+In style.css, first let's declare some variables
+
+```scss
+$primary-color: #88f;
+$empty-color: #ddd;
+$border-color: #444;
+```
+
+Then, let's declare the cell class to use them
+
+```scss
+.cell {
+  fill: $empty-color;
+  stroke: $border-color;
+  cursor: pointer;
+
+}
+```
+
+And finally, let's *nest* selectors to specialise cells if they are alive or hovered. Normally, nesting selectors inside the `.cell` selector would select dependents. But if we preceed the selectors with `&` we can select for cells that have additional classes or pseudoclasses. Nest this inside the block for the cell class
+
+```scss
+  &:hover {
+    fill: darken($empty-color, 10%);  
+  }
+  &.alive {
+    fill: $primary-color;
+  }
+  &.alive:hover {
+    fill: darken($primary-color, 10%);
+  }
+```
+
+We've now used some SCSS features to describe our styles. It's time to use SASS to preprocess it.
+
+First, let's just run SASS and see what it converts it to
+
+```sh
+node_modules/sass/sass.js style.scss
+```
+
+That should print out some derived CSS on the terminal.
+
+Let's get it to put it in style.css
+
+```sh
+node_modules/sass/sass.js style.scss style.css
+```
+
+And now if we reload the our page, our Conway Game of Life should have got slightly prettier again, as hovering over cells just hints them slightly darker.
+
+## Why we don't do a lot of CSS
+
+In this tutorial, you've largely been introduced to SASS to introduce NPM, styling SVG elements, and the idea of a pre-processor.
+
+In practice, if you're looking to develop an initial prototype quite quickly, developers don't write their own CSS from scratch. In many cases, they start by using classes from a CSS framework such as Bootstrap. [http://getbootstrap.com](http://getbootstrap.com)
+
+It provides CSS classes for attractive common widgets, such as button groups, alerts, etc.