SASS is CSS with superpowers. So, as front-end developer and learner I researched about LESS which was great but very soon I changed to SASS because of using pre/post processor you can write CSS more programmatically and can help you develop robust systems.

Nonetheless, I regularly find that individuals just know a couple of fundamentals of SASS like settling and factors when there is a lot more it can do. So today I figured I would share a boost to the fundamentals of SASS.

---

Intro

SASS stands for Syntactically Awesome Style Sheets - it's CSS with superpowers. SASS is the mos tpopular CSS pre-processor. It allows you to write SASS/SCSS which gets compiled into plain CSS for the browser to read.

SASS vs SCSS

The only difference between SASS and SCSS is the syntax. SCSS is most similar to standard CSS and uses curly braces and semi colons while SASS uses indentation instead.

NESTING

Nested styles will compile into chained selectors. You can also use and operator which represents the current selector.

SCSS:

.container {
    min-width: 400px;
    max-width: 1024px;
}

.container a {
    color: #blue;
}

.container.padding-small {
    padding: 5px;
}

.container__heading {
    font-size: 1.5rem;
}

COMPILED CSS

.container {
    min-width: 400px;
    max-width: 1024px;

 a {
    color: blue;
 }
 &.padding-small {
    padding: 5px;
 } 

 &__heading {
    font-size: 1.5rem;
 }
}

Calculations

Execute calculations directly in the stylsheet that will output as the calculated value. Keep in mind you can't mix units and this is not the same as the Calc() function which works in plain CSS.

SCSS

.sidebar {
    width: 390px;
}
.half-column {
    width: 50%;
}

Compiled CSS

.sidebar {
    width: 132px + 258px;
}

.half--column {
    width: 100/2 * 1%;
}

Variables

Use variables to store re-usable values throughout your project. Useful for consistent clours and spacing units.

SCSS

$primary: #ff01b1;
$spacing-unit: 10px;

.button {
    background-color: $primary;
    padding: $spacing-unit;
    margin: 0 0 $spacing-unit *2;
}

Compiled CSS

.button {
    background-color: #ff01b1;
    padding: 10px;
    margin: 0 0 20px; 
}

Placeholders

Blocks of reusable CSS that helps gets compiled into comma separated selectors.

SCSS

%container {
    border-readius: 5px;
    border: 1px solid #ff01b1;
    padding: 10px;
}

.article {
    @extend %container; 
    margin: 0 0 26px;
}
.card {
    @extend %container; 
}

Compiled CSS

.article, 
.card {
    border-radius: 5px;
    border: 1px solid #ff01b1;
    padding: 10px;
}
.article {
    margin: 0 0 20px;
}

Mixins

Blocks of reusable CSS you can pass values to. You can set a default that will be used if no value is set.

SCSS

@mixins square($size: 100px) {
    height: $size;
    width: $size;
}
.avatar {
    @include square(); 
}
.featured-image {
    @include square(400px); 
}

Compiiled CSS

.avatar {
    height: 100px;
    width: 100px;
}

.featured-image {
    height: 400px;
    width: 400px;
}

Partials

Ways to split up your CSS into reusbale chunks. partial file names start an underscore.

File structure

• _footer.scss
  • _header.scss
    • _settings.css

Import partials into SCSS file

@import 'scss/settings'; 
@import 'scss/header'; 
@import 'scss/footer';

Let's get into some advanced tutorials.

---

Complex Nesting

It is possible to assign the parent selector to a variable in order to create a complex nested selector.

/* Advanced selectors */
.container {
    $root: &; 
    max-width: 1024px;

&--narrow {
    max-width: 500px;
}

 &__title {
    font-size: 2em;
   #{root}--narrow & {
       font-size: 1.5em;
    }
  }
}

Compiled CSS

.container {
    max-width: 1024px;
}
.container--narrow {
    max-width: 500px;
}

.container__title {
    font-size: 2em;
}
.container--narrow .container__title {
    font-size: 1.5em;
}

Adjust COLOR

SASS has some built in colour functions you can use to alter colours. This is really useful for creating variants of your brand colors.

/* color functions */ 

$primary: #003366;
$primary-light: lighten($primary, 20%);
$primary-dark: darken($primary, 20%);
$secondary: adjust-hue($primary-light, 90deg);

/* RESULTS */ 

$primary: #003366;
$primary-light: #00593b;
$primary-dark: #000d1a;
$secondary: #b300b3;

MAPS

Maps act like objects pf variables. You can create complex nested maps but those need a custom function to access.

/* MAPS */
$font-sizes: (
    "heading": 2.5em,
    "body": 1em, 
    "smallprint": 0.8em,
); 

$font-weights: (
    "regular": 400, 
    "medium": 500, 
    "bold": 700, 
); 

.article__heading {
    font-size: map-get($font-sizes, "heading");
    font-weight: map-get($font-weights, "bold");
}

IF and IF Else

You can use if and if else statements in mixins and functions. You can check these against boolean or null values.

/* IF STATEMENT */
@mixin avatar($size, $circle: false) {
    width: $size; 
    height: $size; 

    @if $circle {
        border-radius: $sie / 2; 
    }
}

.profile__img {
    @include avatar(100px, true); 
}

/*if else if statement*/

@mixin theme-colors($light-theme: true) {
    @if $light-theme {
        background-color: $light-background;
        color: $light-text; 
    } @else {
        background-color: $dark-background;
        color: $dark-text;
    }
}

.banner {
    @include theme-colors($light-theme: true); 

    body.dark & {
        @include theme-colors($light-theme: false);
    }
}

Some languages consider more values falsey than just false and null. Sass isn't one of those languages! Empty strings, empty lists, and the number 0 are all truthy in Sass.

Each Loops

You can output multiple selectors using an each loop. You will need a map or list variable to loop through. It's very useful for utility classes like columns or typography.

/* EACH LOOP */
$column-widths: (
    "half": 50%, 
    "third": 33.3333%, 
    "quarter": 25%,
);

@each $width, $value in $column-widths {
    .column-#{$width} {
        max-width: $value;
    }
}

Compiled CSS

.column-half {
    max-width: 50%
}

.column-third {
    max-width: 33.3333%;
}

.column-quarter {
    max-width: 25%;
}

Functions

You can also create functions that accepts arguments and return a value. They can be simple (like the example) or more complex.

/*functions*/

@function pxtoem($px-size, $base-size: 16) {
    @return $px-size / $base-size * 1em; 
}

.heading {
    font-size: pxtoem(32); 
}

/*result*/

.heading {
    font-size: 2em;
}

ERRORS AND WARNING

Don't forget to add error and / or warning messages to any complex functions to catch any edge cases when the functions can't compile correctly.

@warn 'Function warning message'; 
@error 'Function error message'; 
@error 'Messages can include #{$variables}';

That's IT 😅

---

Removal.AI - [SPONSOR]

Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.

• ✅ Drag & Drop Multiple Images
• ✅ Optimize Product Images
• ✅ Select Your Background
• ✅ Set Your Output Size
• ✅ Exceptional Results

Visit -> Removal AI