SASS

3 min readMay 29, 2021

Like CSS…. but different :)

So what is SASS? https://sass-lang.com/ describes it as “ CSS with superpowers.” And they have the code to back it up!

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

So lets start at the beginning. CSS (Cascading Style Sheet) is basically a scripting language. While HTML is used to structure a web document, CSS comes through and specifies your document’s style — page layouts, colors, and fonts are all determined with CSS. Think of HTML as the foundation for your house, and CSS as the interior design choices.

CSS brings style to your web pages by interacting with HTML elements. Elements are the individual HTML components of a web page — for instance a paragraph — which in HTML might look like this:

<body>
  <p>
    Hey my name is Vincent!  
  </p>
  <p>
     What is your name?
  </p>
</body>Which produces:

To style this we would use a bit of CSS like this:

body {
  font: 100% Helvetica, sans-serif;
  color: green;
}

Which produces:

Magic right?! But what happens when your CSS file is pages long and things become repetitive. With Sass we can use variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example:

body {
  font: 100% Helvetica, sans-serif;
  color: green;
}

becomes:

SASS SYNTAX

$font-stack:    Helvetica, sans-serif
$primary-color: #333body
  font: 100% $font-stack
  color: $primary-color

Now we can use our fonts and colors all throughout our entire CSS document.

SASS has tons of tricks just like this that can make your CSS styling easier.

Nested Rules: Nest your CSS properties within multiple sets of {} brackets. This makes your CSS code a bit more clean-looking and more intuitive.

Better Operators: You can add, subtract, multiply and divide CSS values. Sure the original CSS implements this via calc() but in Sass you don’t have to use calc() and the implementation is slightly more intuitive.

Functions: Sass lets you create CSS definitions as reusable functions!

Mixins: Create a set of CSS properties once and reuse them or “mix” together with any new definitions. In practice, you can use mixins to create separate themes for the same layout, for example.

So on your next project try and use SASS and see if it improves your CSS flow!

SASS

SASS SYNTAX

Written by Vincent Collis