SCSS - Make Writing CSS Fun Again

Mikkel SandbergFull Stack Developer
Web developer and designer skilled at creating beautiful web applications.
Published:
Updated:
Shoutout to Emily Plummer for giving me this article! She did most of it, I just finished it up and posted it for her :)
 

 

Introduction


In a previous article, I gave some tips on Sass using the Sass syntax. This time around though, I’m going to be using the SCSS syntax to show you some more features of Sass. Here are four singular capabilities of Sass.
 

1. Super Long Selectors

Often times while writing CSS, we find ourselves writing verbose selectors, then in the next rule having to repeat that same long selector just to select a different child element. A little copy-pasta helps the pain, but these long selectors still make reading your code hard to do.

Sass fixes this with nesting! Here's an example:

Let's say you want to edit a button, that is inside of a < ul > that is ​inside of a < div > that is inside of a < section > that is inside of a < container >, and you really need to be specific in this case so that your styles don't carry over. In regular CSS you would have to do something like this:
 
.container .sectionName .divName ul .button { color: #fff; }

Open in new window


But then you realize you need to edit three other things in that unordered list, and they all have to be as specific as possible. Now you have to do this:
 
.container .sectionName .divName ul .button { color: #fff; }
                      .container .sectionName .divName ul .kittens { border: 2px solid #fff; }
                      .container .sectionName .divName ul .puppies { font-size: 4rem; }
                      ​.container .sectionName .divName ul .lava { background: red; }

Open in new window


With SCSS you would just do:
 
.container .sectionName .divName ul { 
                        .button { color: #fff; }
                        .kittens { border: 2px solid #fff; }
                        .puppies { font-size: 4rem; }
                        .lava {  background: red; }
                      }

Open in new window


Beautiful! The code is pleasant to read, and you just saved a bunch of time by not having to write out long selectors.
 

2. Vendor Prefixes

The web developer's best frenemy. Vendor prefixes are tedious to include in your CSS, but ceaseless advocates for the end user that we are, they are necessary. With Sass you can create a mixin, then @inclue that mixin wherever it's needed in the code. Here's an example:
 
@mixin linearGrad($top, $bottom) {  
                        background: $top;
                        background: -moz-linear-gradient($top, $bottom);
                        background: -webkit-linear-gradient($top, $bottom);
                        background: linear-gradient($top, $bottom);
                      }

Open in new window


And then to call it:
 
.divName {  @include linearGrad(#ff666,#ffccff); } 

Open in new window


3. Media Queries

Sass also allows you to nest media queries inside of their targeted element. This makes your code much easier to read, and editing media queries much quicker.
 
.kittens {
                        width: 300px;
                        @media screen and (max-width: 320px;) {
                          width: 120px;
                        }
                        @media screen and (min-width: 1200px;) {
                          width: 600px;
                        }
                      }   

Open in new window


4. Responsive Math

Math is possibly the worst thing ever. However, Sass is there to save the day. Let’s say you need to make a text section resize nicely, and you’re using a 960 px grid. Instead of busting out your TI-89 to crunch those numbers, just let Sass do the heavy lifting.
 
.textArea {
                        width: 320px / 960px * 100%;
                      }  

Open in new window

 

Conclusion


Well, that’s all folks! If you haven’t tried out Sass yet, you may need to rethink your entire life -- or at least your coding choices. It will revolutionize the way you approach building websites and make your job as a developer easier. 

Again, if you want to see more Sass, check out my other article. And for even MORE information, check out the official documentation.
3
1,917 Views
Mikkel SandbergFull Stack Developer
Web developer and designer skilled at creating beautiful web applications.

Comments (1)

Top Expert 2013

Commented:
I would never recommend the use of SCSS or SASS or any other parser choker being touted.  If you become familar with how the CSS parser in any mainstream browser you very quicly see the the parser needs to execute 30-50% more steps to parse this kind of nonsense because everything unds up in nested classes and the right to left parsing that is necessary to optimize attachment in the Document Object.

This is just another example of an approach that helps the lazy avoid learning how to do things right at the expense of slowing down the presentation of the page.

Nice article... bad idea... bad technique; fortunately most of experienced professionals tried it and are abandoning it because it has no net valuer.

Cd&

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.