CSS Preprocessing
For the purposes of this short article we will focus on the two most popular CSS preprocessing languages: SASS and LESS.
If you’re a Web developer who does a lot of work with CSS and has yet to integrate CSS preprocessing into your workflow then the word of the day is either SASS or LESS (I use both depending on the project). If you’re generally resistant to stepping outside of your comfort zone, especially if that zone is working just fine for you, I can relate. I had been reading about CSS preprocessing for a couple of years before I decided to jump into it. Actually, it would be more accurate to say I was sort-of pulled into it by a coworker. But I’m thankful for it. I promise that once you start using it you’ll never go back.
The main reason for my initial resistance in using a CSS preprocessor is that I prefer simplicity over complexity. I had my workflow. I used HTML, JavaScript and lots and lots of CSS and it worked just fine for me. I figured if it wasn’t broken – I wasn’t going to try and fix it. But, as I found out pretty quickly, using a CSS preprocessor isn’t very complex and the learning curve is not steep. In fact, all valid CSS is valid SASS or LESS as the preprocessed syntax compiles to CSS so you can utilize as much (or as little) of the additional functionality CSS preprocessing offers when starting out.
Why should I use a CSS preprocessor?
- Nest your CSS instead of repeating your selectors when having to target child elements.
- Use variables instead of repeating identical values.
- Extend classes (apply the styles of a given class to other elements).
- Use Mixins (Mixins are reusable groups of code).
FEATURES OVERVIEW
All code samples use SCSS syntax.
Nesting
Nesting selectors means you only have to declare each selector once.
SASS
ul.nav {
position: absolute;
bottom: 5px;
right: 0;
li {
display: inline-block;
margin: 0 20px;
a {
padding: 5px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
color: #ff6600;
&:hover { text-decoration: underline; }
}
}
}
Which would compile to something like:
CSS
ul.nav {
position: absolute;
bottom: 5px;
right: 0;
}
ul.nav li {
display: inline-block;
margin: 0 20px;
}
ul.nav li a {
padding: 5px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
color: #ff6600;
}
ul.nav li a:hover {
text-decoration: underline;
}
Variables
Assigning values to variables allows you declare them once. In the event that a client wants to change the value of one of the variables (like a color) you only need to change it in one place.
SASS
$blue: #99ccff;
$primary: $blue;
a {
color: $primary;
}
Which would compile to:
CSS
a {
color: #99ccff;
}
Extending Classes
Allows you to style an element and apply that style wherever you want.
SASS
.button {
display: inline-block;
padding: 5px 20px;
background: $blue;
color: $white;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
}
// apply .button styles to a form submit button
input[type=submit] {
@extend .button;
}
// apply .button styles to a cta anchor element
a.cta {
@extend .button;
}
Mixins
Allows you to make a group of declarations (with arguments if needed) to be used wherever you want.
SASS
// declare mixin
@mixin wmw($width) {
width: $width;
max-width: $width;
}
// apply mixin
.sidebar-right {
@include: wmw(34%);
}
Which would compile to something like:
CSS
.sidebar-right {
width: 34%;
max-width: 34%;
}
Lastly, installing, configuring and automatically compiling your code is simple. If you haven't yet experimented with this technology, I would encourage you to take it for a spin soon. I can guarantee you'll be thankful you did.
Any developer comments or clarifications would be welcome below.
