Sign Up Login Videos

These are my favourite things about SASS

3

These are my favourite things about SASS

SASS stands for Syntactically Awesome Style Sheets and it'll make your CSS so much easier to write!

Sass adds new features to CSS, like variables, nesting, mixins and more.

These are my favourite parts of Sass.

Variables!

Sass introduces variables to CSS! Normally when using CSS we have to repeat ourselves over and over again. Here's some simple CSS:

body {
    font-family: Arial, Helvetica, Sans-serif;
    color: #333;
}

Here's the equivalent SCSS.

$dark-text: #333;
body {
    font-family: Arial, Helvetica, Sans-serif;
    color: $dark-text;
}

You can see we create variables using the dollar-sign ($), just like PHP. Variables can store any CSS value you like, colours, fonts and more!

Indentation!

Sass comes in two flavours, SCSS and SASS. SCSS looks mostly like regular CSS, it's the flavour I used up above when explaining variables.

If we want to use curly brackets we store our code in .scss files. If we want to use indentation we store our code in .sass files. If you like Python, you'll love Sass!

$dark-text: #333
body
    font-family: Arial, Helvetica, Sans-serif
    color: $dark-text
h1
    color: $dark-text
    font-size: 22px

In the above code, I'm using SASS with indentation and no semi-colons.

Nesting

Nesting is another really cool feature of Sass. It saves us from even more of CSS's repetition. Look at the following example using regular CSS.

nav ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
nav li {
    display: inline-block;
}
nav a {
    color: #CCC;
}

Can you see how many times we had to write nav and ul? Sass makes our lives much easier, here's the equivalent Sass.

nav
    ul
        list-style: none
        margin: 0px
        padding: 0px
    li
        display: inline-block
    a
        color: #CCC

Mixins

Have you ever tried to use some of the latest CSS features and then you find out you need a different vendor prefix for each browser? Sass Mixins solve that problem for you.

Here's some code from Sass's documentation showing Mixins with the CSS3 transform property.

=transform($property)
    -webkit-transform: $property
    -ms-transform:     $property
    transform:         $property

.box
    +transform(rotate(30deg))

And here's the CSS you would have had to write if you didn't have Sass.

.box {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

These are just my favourite features of Sass. There's lots more to Sass that you can find here. https://sass-lang.com/guide

If you have any questions, send me an email ([email protected]) 😁

  • CSS
  • HTML

0 Replies

x