<

Improve company productivity with a Business Account.Sign Up

x

SCSS - Make Writing CSS Fun Again

Published on
4,251 Points
951 Views
3 Endorsements
Last Modified:
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
Comment
1 Comment
 
LVL 53

Expert Comment

by:COBOLdinosaur
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&
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month