GitHub Essentials, SassyCSS

Brilliant! 75% through amigoscode's GitHub Essentials course, and it's all making sense now, although I still have an authentication issue (despite having configured GitHub with SSH keys). A nice little sidetrack I had was looking at SCSS.

SassyCSS/Sass or whatever it's called was confusing for the first ten minutes because I couldn't decide where to learn about it. sass.lang.com's guide seemed to presuppose a fair bit, and w3schools' explanation was one of the worst I have ever read by them, who usually teach beginners well.

That's when I decided to just go for it, so I set up a simple html file with a linked .css file, which set h1 size, a background colour and then a div #greenText where the text was green in one paragraph. It worked in Firefox.

Then I changed the tag on the .css file to .scss, and renamed the original .css file, and IT STILL WORKED. Mm. Then I put some scss variables at the top:

/* define primary colors */ $primary_1: #0066cc; $primary_2: #cc0000; //and set body background colour further down.. background-color: $primary_1; and of course it did NOT work any more. Something I needed to know. Test it till it breaks and all that.

Back to the guide at sass.lang.. and it says it needs transpiling. I was not put off by this as Nelson had had me tinkering in Git Bash a fair bit. So, I opened Node.js bash, and typed: npm install -g sass then in Git Bash navigated to the folder where the html and .css files were and ran: sass mystyles.scss mystyle.css After refreshing my browser, it worked. I looked in the folder and there was a mystyles.css file there that wsn't there before! I opened that in EditPad Lite, and it was a right mess, just all joined together and not formatted. So I opened it in VS Code and it's all nicely formatted! Another lesson learned!

Moral of the story: always use VS Code and remember to transpile!

Later, on the couch with my phone in hand I read to the end of another scss basics article and it all made sense, even the bit about importing .scss styles into main.scss, which reminded me of the mess I used to get myself into by importing php files into the index.php files, y'know - seperate files for footer etc.

Next on the curiosity list is Bootstrap. Now, what on Earth is that all about?