Week 8: SASS how-to

Initial set-up

1. Download the source files from Bootstrap 
2. Unzip them into the folder where you will be using them (in our case, I have set-up a 'SASS' folder in our git repo)
3. Follow the instructions on tooling set-up on Bootstrap (repeated below)
1. Download and install Node.js
2. Using the command line (Terminal, iTerm, Powershell, what-have-you), install Grunt with npm install -g grunt-cli
3. After a quick refresher in command line, navigate to the Bootstrap folder that you unzipped (for us: 'SASS' as above).  OK, so now you're using the command line and you're in the Bootstrap folder.  If you type ls it should look similar to this:
   
   
4. Install the local dependencies listed in package.json by running npm install
5. Next up is Ruby.  If you are on a mac, you should have it already installed but can check by typing ruby -v into the command line.  If you need to download or update there is info here and here.  But, if you need to install on Windows, we ran into a few problems and used this tutorial from Forward HQ to sort it out.
6. Almost there! Two-parter for Bundler: 1) install in the command line by running gem install bundler and then 2) run bundle (for all the Ruby dependencies you will need).
4. Last step, install SCSS Lint by running gem install scss_lint

Phew, you still with me?  You may (or hopefully not) have any errors.  You may need to prefix the command line with sudo (I know, I know, lots of people say you shouldn't), or might get other random errors (google is your friend), but hopefully you have the things installed.  Now for the fun part :)

Using SASS

In your Bootstrap folder (for our team 'SASS') is a folder called 'scss' which is filled with many, many .scss files.  Being Bootstrap, it is all fairly logically named so it shouldn't be too hard to find any CSS you need to change.  '_variables.scss' has all the colours and typography (amongst other things), etc, etc. Have a look at the SASS documentation for how to use variables, nesting, other syntaxy-things.

Once you've changed the things you need to, how do you get it to be a CSS (and JS) file to use on the website?  Back to the command line!

To compile the CSS/JS files:

1. Using command line, navigate to the bootstrap folder we were working in before.  You may still be there :)  (I'm a broken record but "For our team it is the 'SASS' folder")
2. run grunt dist and fingers crossed, 0 errors!

For our purposes, that's about it but there is more info on grunt commands in the Bootstrap documentation.

Notes for team

• No need to copy/paste files or folders, the CSS and JS import links are now up to date!
• Remember: sync git, make changes, sync git
• The Bootstrap 4 documentation has lots of great info, start with Layout, Content, Components
• Bootstrap also has a slack channel - a great place to go for help!