Learning About SCSS
26 September 2017 by Amy
This week in bootcamp I had exposure to most of the topics covered this week, so instead my instructor gave me a different project to work on including a bunch of installations on my class computer including: compass, node.js, npm, and SCSS. This was a great exercise for me as my major exposure to dev environments (and the environment on my home computer) already had ruby installed. I realized eventually that having ruby installed on your computer is a prerequisite for many of the above programs. I realized I could make my process far more efficient by installing ruby, then working on my other installation goals. It seems to have worked well, as some of them can be installed as a ruby gem, plus I’ll be able to easily install other programs if I want to work on other projects I have up on Github. :-)
Of the new things I played with this week I’m most excited about Sass. I’ve worked with css a little on simple projects and while many of the tutorials I’ve done have felt it pertinent to introduce Sass those tutorials were some of the first I ever completed and I didn’t fully grasp the problem Sass solves, so the value wasn’t as apparent.
Why it’s cool.
Sass cool because it allows you to set variables throughout your website so you can change a color, a font-stack, etc efficiently with controlling the single variable instead of finding every place you set the color and manually changing one specific element. It also eliminates time spent hunting for the one piece of blue text that should now be red. Furthermore, you can create separate documents (partials) for each element and it will be complied all together when you run your web document. This utilizes efficiency of both humans and computers by making it much easier for humans to read and edit, and compiling it all into one document for the computer to read.
Partials are pretty cool and I’ve a little experience using them in my Jekyll blog that I started earlier this year. I look forward to getting to use them in practice in Sass.