Trying out Sass with CSS, part 1

Last post I write about my growing interest in using Sass for CSS development. First I’ll review some of what I learned in the Sass Essentials Training course and then review my top takeaways from the CSS to Sass: Converting an Existing Site video course in part 2 of this series.

In the Sass Essentials course, the instructor reviewed some of the benefits of using the Sass language and I’ll provide some very high level details because there is so much existing information already out there.

Some of the key features of sass include:

• Variables – which allow you to assign names to colors and fonts that you’ll reuse. For example, instead of typing in the hexadecimal code for the colors you’ll use throughout a theme, you would assign names to them, like $main-theme-color or $secondary-theme-color. And wherever you need to apply that color, you would use $main-theme-color or $secondary-theme-color to whatever feature it is, whether it’s a font color or border color. This is perfect for when you’re trying out different color during development. Without sass, you’d have to find/replace each hexadecimal value, but this way you’d only have to change it once in the location where you defined that variable.
• Nesting – this allows you to keep related formatting together. Say you want to style anchor elements that appear within a specific element or class differently from other anchor elements within the document, you can nest them. So instead of coding: p a {font-color:white;} , you’d code the following in sass

  p { 
    a {font-color:white;} }
  

  And it would then process into CSS and appear like p a {font-color:white;} . I can’t see how much easier that is yet, but as I continue development maybe I might.

• Partials – this allows you to separate your CSS into “modules” which are like micro files for various components of your page (typography, form styling, navigational components, and more) that eliminate working with a ridiculously long CSS file. This way when you need to only modify the typography, you don’t have to scroll down a long CSS file, instead you’d find the sass partial, make edits there, compile into CSS, and refresh the page. In order to implement the partials, you’d add the @import 'partialsName'; rule to your master sass file (i.e. style.scss) and once it’s processed into the compiler, all of the CSS from the individuals partials will appear within the master CSS file (style.css) as if it were originally coded in that one document. Best practice is to name partials as _partialsName.scss this way the compiler does not generate a regular CSS file for every partial file when everything is eventually processed, unless that is what you want.
• Mixins – They’re similar to functions in that they’re basically blocks of CSS code you’ve identified as reusable because it will likely reappear throughout your stylesheet. Mixins enables you to create that one mixin and plug it in your CSS wherever you need to reapply that using the @include rule. This would be helpful for floats or clearing.

Other good things to note:

• If you want to include comments from your sass file (which is .scss) that appear in the processed CSS file, you would need to write them as /*! insert comment here */, making sure to include the exclamation mark. If have comments you only want to appear in sass but not in CSS, you would comment them like you would in JavaScript, like // Insert comment here .
• You can do math with sass, utilize if/else statements, loops, and arrays as you would with other programming languages, but I don’t think I’ll utilize them at this point, gotta start small.

I took a lot of notes for myself in an actual notebook but there are so many resources out there on sass already. I would highly recommend the Sass Essentials course on Lynda.com for anyone looking to get a better handle on what it is and why you should consider incorporating it into your workflow. If you can’t afford Lynda, check with your local public or school library to see if they have a subscription which will allow you to take the courses!