When making websites, CSS (Cascading Style Sheets) is a language in code files commonly attached to website HTML documents that determine the look of the webpage, such as the colours and the layout. The code syntax uses an understandable declarative approach:
.some-html-element { background-color: red; font-size: 20px; font-weight: bold; width: 300px; }See the Pen Preprocess the Process 1 by Justin Wong (@CosmicJustin) on CodePen.
Going bigger…
So CSS is a good base for coding, but there are some shortfalls with the code syntax in practice; vendor prefixes, “DRY”-ing code, and version control to name a few. Time to bring in the CSS preprocessors.
Preprocessors are ways of extending the CSS worklow by offering a new language, that when compiled, gives files of valid CSS declarations (like the snippet above). They plug holes and fix issues with the current CSS syntax to make building websites easier, faster and more efficient. We'll be talking about the preprocessor called Sass (Syntactically Awesome StyleSheets) for the rest of this article (using the SCSS syntax style), but there are many more out there, such as LESS or Stylus.
Overview of Sass
Sass uses the existing CSS syntax as a base and just extends it slightly for easily transitioning to using it. For example, You still declare styles in the same way:
p { font-family: Arial, Helvetica, sans-serif; background-color: #00AAEF; a { color: #EF4567; } }But we can embed selectors within selectors that helps us in writing less code. The above then outputs as:
p { font-family: Arial, Helvetica, sans-serif; background-color: #00AAEF; } p a { color: #EF4567; }We can also declare variables to use later in the stylesheet. This means that we don't have to find every instance of a colour and change each one; we can just change the value of the variable:
$arial: Arial, Helvetica, sans-serif; $blue: #00AAEF; $red: #EF4567; p { font-family: $arial; background-color: $blue;; a { color: $red; } }Variables are useful for computing loops, such as for loops or if statements:
.forecast { @if $weather == 'raining' { color: blue; } @else if $weather == 'sunny' { color: yellow; } @else { color: grey; } } @for $i from 1 through 10 { .item-#{$i} { left: $i * 1px;} }The first code block checks an arbitrary $weather variable and then checks for some conditions, which would output different colours. The second block iterates through numbers from 1 to 10 (inclusive), outputting a new selector each time with a new left value.
To conclude…
There are many more constructs and computing code that can be constructed out of Sass but this was just a snippet of what it can do. There also many ‘plugins’ for the Sass framework that enhances its capabilities further, such as Breakpoints (makes writing media queries easier); Compass (various functions for CSS tricks as well as vendor prefixing and cross-browser ‘helpers’) and Susy (a framework for creating grid layouts on demand). These all help to make the CSS potentially great — but as always — “with great powers comes great responsibility.”