What Color is this?

.next-slide {
    color: #cf649a;
}

Variables

$pink: #cf649a;
$green: #59CD90;

header {
    background-color: $green;
}

h1 {
    color: $pink;
}

$pink: #cf649a
$green: #59CD90

header 
    background-color: $green


h1 
    color: $pink

SCSS

SASS

Think of SASS as a Light Javascript

Mixins

(functions)

@mixin button-template($color) {
    background-color: $color;
    border: none;
    border-radius: 5px;
    padding: 15px;
    color: white;
}

.button-one {
    @include button-template($pink);
}

.button-two {
    @include button-template($green);
}

SCSS

Extend

.container {
  margin: auto;
  width: 80%;
  max-width: 800px;
}

main {
  @extend .container;
}

SCSS

<main>

  <h1>Title</h1>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab nemo eligendi consequuntur, libero quae perspiciatis id, modi nisi rem saepe omnis nesciunt, in. Neque dolorum voluptas ad dolorem nostrum!</p>
  
</main>

Nesting

Nesting

header {
  position: relative;
  padding: 15px;
  @extend .container;
  
  h3 {
    display: inline;
    font-size: 30px;
  }
  
  nav {
    
    display: inline;
    position: absolute;
    right: 0;
    
    a {
      text-decoration: none;
      color: $pink;
      font-size: 25px;
      margin-left: 15px;
    }
  }
}

<header>

  <h3>Logo</h3>
  
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

</header>

SCSS

HTML

Result

Operators + - * / %

$gutter: 2%;

.green {
  height: 100vh;
  width: (100% - ($gutter * 1)) / 2;
  background-color: $green;
  float: left;
}

.pink {
  margin-left: $gutter;
  height: 100vh;
  width: (100% - ($gutter * 1)) / 2;
  background-color: $pink;
  float: left;
}

SCSS

Result

Partials & Imports

header {
  position: relative;
  padding: 15px;
  @extend .container;
  
  h3 {
    display: inline;
    font-size: 30px;
  }
  
  nav {
    
    display: inline;
    position: absolute;
    right: 0;
    
    a {
      text-decoration: none;
      color: $pink;
      font-size: 25px;
      margin-left: 15px;
    }
  }
}

@import 'header';
@import 'home';
@import 'footer';

_header.sccs

styles.scss

SASS FACT:

There are if else statements in SASS

Preprocessing

@import 'header';
@import 'home';
@import 'footer';

styles.scss

.container, header {
  margin: auto;
  width: 80%;
  max-width: 800px;
}

header {
  position: relative;
  padding: 15px;
}
header h3 {
  display: inline;
  font-size: 30px;
}
header nav {
  display: inline;
  position: absolute;
  right: 0;
}
header nav a {
  text-decoration: none;
  color: #cf649a;
  font-size: 25px;
  margin-left: 15px;
}

styles.css

SASS FACT:

There are for, for each, and while loops in SASS

How... Do We Use SASS?

Command Line!

$ npm install node-sass

$ sass input.scss output.css

$ sass --watch input.scss:output.css

or

or

$ sass --watch src/sass:src/css

Install

Run

Thank You