A brief example of SASS

- 2 mins read

Lost trying to understand SASS?

do it sass style
do it sass style

I don’t usually make large HOW-TOs, you know. I prefer to make an example of something, and you can progress at your own pace. At least, Is the way I used to learn new things.

In the words of the Sass team, “CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.

The Koala app icon
The Koala app icon

Here I’ll show you a super basic example and, from here, you can progress at your own pace.

$main-font: Helvetica, sans-serif // this line defines the value for the "main-font" variable
$main-color: #fabada // this line defines the variable "primary-color"

  font: 14px $main-font // changing all fonts with one modification
  color: $main-color // yes, you can change hundreds of values with one movement =D

// and this is only a comment, hi!

From here, and with a compiler (I recommend Koala) you can start to do your own amazing stylesheets =D

I said to you, this post will be super basic =P

Share: Link copied to clipboard


Previous: Russell’s teapot (Bertrand Russell, 1952)
Next: ¿Qué hora es?, ¿qué color es?

Where: Home > Technical > A brief example of SASS