One Pager: Sass Tutorial for Beginners
Tags: sass, scss, beginners, css
Published: 2022-03-19 20:17:02

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.

{% embed https://www.youtube.com/watch?v=_a5j7KoflTs %}

## Variables in CSS vs SCSS:
```css
/* CSS */
body {
  --ocean-color: blue;
}

div {
  background: var(--ocean-color);
}
```
```sass
/* SCSS */
$ocean-color: blue

div {
  background: $ocean-color;
}
```

Map of values:
```sass
/* SCSS */
$font-weights: (
  "regular": 400,
  "medium": 500,
  "bold": 700
);

body {
  font-weight: map-get($font-weights, bold)
```

## No nesting in CSS vs Nesting in SCSS
```css
/* CSS */
body {
  width: 80%;
}

body p {
  color: white;
}
```
```sass
/* SCSS */
body {
  width: 80%;

  p {
    color: white;
  }
}
```

## & (ampersand)
& (ampersand) is a shortcut for "insert name of parent class here". The following are equal.
```sass
/* SCSS */
.container {
  width: 80%;

  .container-paragraph {
    background: black;
  }
```
```sass
/* SCSS */
.container {
  width: 80%;

  &-paragraph {
    background: black;
  }
```

Using just the & (ampersand) compiles (translates) this sass code:
```sass
/* SCSS */
.container {
  width: 80%;

  &-paragraph {
    background: black;
  }
```

...into this css code:
```css
/* CSS */
.container {
  width: 80%;
}

.container-paragraph {
  background: black;
}
```

## #{&} Interpolation
Wrapping the & in #{} (a process called interpolation) translates this sass code:
```sass
/* SCSS */
.container {
  width: 80%;

  #{&}-paragraph {
    background: black;
  }
```
...into this css code:
```css
/* CSS */
.container {
  width: 80%;
}

.container .container-paragraph {
  background: black;
}
```

## 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:
```sass
/* SCSS */
/* No _ or .scss needed */
@import "./filename";
```

## Functions:
```sass
/* 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);
```

## Mixins:
```sass
/* SCSS */
/* Define it once */
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Use everywhere */
.container1 {
  @include flexCenter;
}

.container2 {
  @include flexCenter;
}
```

Mixins can take arguments:
```sass
/* 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);
}
```

Mixins can contain JS-like logic:
```sass
/* 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);
}
```

Mixins can wrap a media query. @content is short for "everything defined when the mixing is called":
```sass
/* SCSS */
@mixin mobile {
  @media (min-width: 600px) {
    @content;
  }
}

body {
  @include mobile {
    display: flex;
    flex-direction: row;
  }
}
```

## @extend
Extend styles from one class to the other using @extend:
```sass
/* SCSS */
.main {
  #{&}-paragraph1 {
    background: blue;
    
    &:hover {
      color: yellow;
    }
  }

  #{&}-paragraph2 {
    @extend .main-paragraph1;
    
    /* Optionally override anything being extended */
}
  
```

## Calculations in CSS vs SCSS:
```css
/* CSS */
body {
  width: calc(80% - 40%);
  /* mixing % with px works */ 
}
```
```sass
/* SCSS */
body {
  width: 80% - 40%;
  /* mixing % with px DOES NOT work */ 
}
```

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