DEV Community

Adriansseur
Adriansseur

Posted on • Edited on

One Pager: Sass Tutorial for Beginners

#sass #scss #beginners #css

In this post I share the knowledge I got from the video below. These are notes that helped me learn, not a transcript. Credit goes to freeCodeCamp.org and codeSTACKr.

Variables in CSS vs SCSS: 

/* CSS */ body { --ocean-color: blue; } div { background: var(--ocean-color); }
Enter fullscreen mode Exit fullscreen mode 
/* SCSS */ $ocean-color: blue div { background: $ocean-color; }
Enter fullscreen mode Exit fullscreen mode

Map of values:

/* SCSS */ $font-weights: ( "regular": 400, "medium": 500, "bold": 700 ); body { font-weight: map-get($font-weights, bold)
Enter fullscreen mode Exit fullscreen mode

No nesting in CSS vs Nesting in SCSS 

/* CSS */ body { width: 80%; } body p { color: white; }
Enter fullscreen mode Exit fullscreen mode 
/* SCSS */ body { width: 80%; p { color: white; } }
Enter fullscreen mode Exit fullscreen mode

& (ampersand)

& (ampersand) is a shortcut for "insert name of parent class here". The following are equal.

/* SCSS */ .container { width: 80%; .container-paragraph { background: black; }
Enter fullscreen mode Exit fullscreen mode 
/* SCSS */ .container { width: 80%; &-paragraph { background: black; }
Enter fullscreen mode Exit fullscreen mode

Using just the & (ampersand) compiles (translates) this sass code:

/* SCSS */ .container { width: 80%; &-paragraph { background: black; }
Enter fullscreen mode Exit fullscreen mode

...into this css code:

/* CSS */ .container { width: 80%; } .container-paragraph { background: black; }
Enter fullscreen mode Exit fullscreen mode

#{&} Interpolation

Wrapping the & in #{} (a process called interpolation) translates this sass code:

/* SCSS */ .container { width: 80%; #{&}-paragraph { background: black; }
Enter fullscreen mode Exit fullscreen mode

...into this css code:

/* CSS */ .container { width: 80%; } .container .container-paragraph { background: black; }
Enter fullscreen mode Exit fullscreen mode

Partials (subfiles)

To break up your SCSS into subfiles you can name them like "_filename.scss". These subfiles are called partials. Then import them into your main file using:

/* SCSS */ /* No _ or .scss needed */ @import "./filename";
Enter fullscreen mode Exit fullscreen mode

Functions: 

/* SCSS */ $font-weights: ( "regular": 400, "medium": 500, "bold": 700 ); /* Instead of doing this: /* body { font-weight: map-get($font-weights, bold) } */  @function weight($weight-name) { @return map-get($font-weights, $weight-name); body { font-weight: weight(bold);
Enter fullscreen mode Exit fullscreen mode

Mixins: 

/* SCSS */ /* Define it once */ @mixin flexCenter { display: flex; justify-content: center; align-items: center; } /* Use everywhere */ .container1 { @include flexCenter; } .container2 { @include flexCenter; }
Enter fullscreen mode Exit fullscreen mode

Mixins can take arguments:

/* SCSS */ /* Define it once */ @mixin flexCenter($direction) { display: flex; justify-content: center; align-items: center; direction: $direction; } /* Use everywhere */ .container1 { @include flexCenter(column); } .container2 { @include flexCenter(row); }
Enter fullscreen mode Exit fullscreen mode

Mixins can contain JS-like logic:

/* SCSS */ @mixin theme($light-theme) { @if $light-theme { background: white; color: black; } @else { background: black; color: white; } .light { @include theme($light-theme: true); } .dark { @include theme($light-theme: false); }
Enter fullscreen mode Exit fullscreen mode

Mixins can wrap a media query. @content is short for "everything defined when the mixing is called":

/* SCSS */ @mixin mobile { @media (min-width: 600px) { @content; } } body { @include mobile { display: flex; flex-direction: row; } }
Enter fullscreen mode Exit fullscreen mode

@extend

Extend styles from one class to the other using @extend:

/* SCSS */ .main { #{&}-paragraph1 { background: blue; &:hover { color: yellow; } } #{&}-paragraph2 { @extend .main-paragraph1; /* Optionally override anything being extended */ }
Enter fullscreen mode Exit fullscreen mode

Calculations in CSS vs SCSS: 

/* CSS */ body { width: calc(80% - 40%); /* mixing % with px works */ }
Enter fullscreen mode Exit fullscreen mode 
/* SCSS */ body { width: 80% - 40%; /* mixing % with px DOES NOT work */ }
Enter fullscreen mode Exit fullscreen mode

The rest of the video shows the building of a real world example, a portfolio site. Check it out for more!

Top comments (0)