Generated by SassMeister.com.

input.scss

@import "breakpoint";


// SASS 'map'
// ----------
$font-sizes: (tiny: 9px, small: 12px, medium: 16px, large:24px);

// SASS 'each loop' over SASS map (name = current itteration)
@each $name, $size in $font-sizes {
    .#{$name} {
        font-size: #{$size};
    }
}

// SASS 'list'
// -----------
$speakers: quintin, petra, nelson;

// SASS 'each loop' over SASS list
@each $speaker in $speakers {
    .#{$speaker}-profile {
        background-image: url('img/#{$speaker}.png');
    }
}

/* 
    SASS 'while' loop. 
    @while loop is more flexible than @for loop
    @while loop allows the step count to be adjusted
    @while loop allows for more complex conditions than @for loop
*/

$j: 2; // condition
@while $j <= 8 {
    .picture-#{$j} {
        width: $j * 10%;
    }
    
    // Important to prevent 'infinate loop'
    $j: $j + 2;
}

// Breakpoint (http://breakpoint-sass.com/)
// ----------------------------------------

// assume min-width (by default) if only a number
$high-tide: 500px;
// set min-width/max-width if both values are numbers
$ex-presidents: 600px 800px;
// if one value is a string, assume a feature/value pair
$surfboard-width: max-width 1000px;
// string tests together within parentheses, assume each item is a feature value pair
$surfboard-height: (min-height 1000px) (orientation portrait);

.reagan {
    @include breakpoint($high-tide) {
        content: "High tide";
    }
}

.nixon {
   @include breakpoint($ex-presidents) {
   content: 'Ex-Presidents';
   }
 }
 
 .johnson {
   @include breakpoint($surfboard-width) {
     content: 'Surfboard Width';
   }
 }
 
 .carter {
   @include breakpoint($surfboard-height) {
     content: 'Surfboard Height, Portrait';
   }
 }
 
 .mandela {
     font-size: map-get($font-sizes, tiny);
     @include breakpoint($high-tide) {
         font-size: map-get($font-sizes, large);
     }
 }
 
// Working with SASS maps 
$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

.map {
    // getting map keys
    content: map-keys($light-weights);
    // getting map values (with interpolation)
    content: "#{map-values($light-weights)}";
    // has key?
    content: map-has-key($light-weights, 'lightest');
    content: map-has-key($light-weights, 'lightest-01');
    // get a map value
    content: map-get($heavy-weights, 'bold');
    // map merge (with 'inspect' for output)
    content: inspect(map-merge($light-weights, $heavy-weights));
    // removing key/value pairs from a map (immutable operation)
    content: inspect(map-remove($heavy-weights, 'bold'));
    // the org map is still in tact after previous operation
    content: inspect($heavy-weights);
}

// new merged map to be used in function below
$all-weights: map-merge($light-weights, $heavy-weights);

// Function example that reduces the amount of typing when working with maps
@function weight($weight-name) {
    @return map-get($all-weights, $weight-name);
}
.all-weights {
    content: weight(lightest);
    content: weight(light);
    content: weight(medium);
    content: weight(bold);
}

// The SASS apersand (placeholder of parent selector name)
.main {
    // this will produce (.main__paragraph)
    &__paragrapgh {
        font-size: 1rem;
    }
    
    // but what if i want the parent class included in the selector?
    // this will produce (.main .main__paragraph)
    #{&}__paragraph {
        font-size: 1rem;
    }
}

// Some variables to be used in mixin below
$primary-color: #000;
$primary-text-color: #fff;

// Sass 'mixin' example for creating a theme (with a default boolean)
@mixin theme($theme-light: false) {
    @if ($theme-light) {
        color: darken($primary-text-color, 100%); // black
        background-color: lighten($primary-color, 100%); // white
    }
}

.theme-light {
    @include theme(true); // we change the default boolean value to set the theme
}

// SASS 'Extend'
.paragraph {
    color: $primary-color;
    font-weight: weight(lightest); // our map function
}

aside {
    .paragraph {
        @extend .paragraph; // will combine this selector with previous '.paragraph'
        background-color: light-grey; // only this will be added to a seperate selector
    }
}

// Great technique for targeting child elements for staggered animation delay
@for $i from 1 through 4 {
    .menu_item:nth-child(#{$i}) {
        // each item has a base delay corresponding to 
        // itteration number plus 0.15s
        transition-delay: ($i * 0.1s) + 0.15s;
    }
}

output.css

.tiny {
  font-size: 9px;
}

.small {
  font-size: 12px;
}

.medium {
  font-size: 16px;
}

.large {
  font-size: 24px;
}

.quintin-profile {
  background-image: url("img/quintin.png");
}

.petra-profile {
  background-image: url("img/petra.png");
}

.nelson-profile {
  background-image: url("img/nelson.png");
}

/* 
    SASS 'while' loop. 
    @while loop is more flexible than @for loop
    @while loop allows the step count to be adjusted
    @while loop allows for more complex conditions than @for loop
*/
.picture-2 {
  width: 20%;
}

.picture-4 {
  width: 40%;
}

.picture-6 {
  width: 60%;
}

.picture-8 {
  width: 80%;
}

@media (min-width: 500px) {
  .reagan {
    content: "High tide";
  }
}

@media (min-width: 600px) and (max-width: 800px) {
  .nixon {
    content: "Ex-Presidents";
  }
}

@media (max-width: 1000px) {
  .johnson {
    content: "Surfboard Width";
  }
}

@media (min-height: 1000px) and (orientation: portrait) {
  .carter {
    content: "Surfboard Height, Portrait";
  }
}

.mandela {
  font-size: 9px;
}
@media (min-width: 500px) {
  .mandela {
    font-size: 24px;
  }
}

.map {
  content: "lightest", "light";
  content: "100, 300";
  content: true;
  content: false;
  content: 700;
  content: ("lightest": 100, "light": 300, "medium": 500, "bold": 700);
  content: ("medium": 500);
  content: ("medium": 500, "bold": 700);
}

.all-weights {
  content: 100;
  content: 300;
  content: 500;
  content: 700;
}

.main__paragrapgh {
  font-size: 1rem;
}
.main .main__paragraph {
  font-size: 1rem;
}

.theme-light {
  color: black;
  background-color: white;
}

.paragraph, aside .paragraph {
  color: #000;
  font-weight: 100;
}

aside .paragraph {
  background-color: light-grey;
}

.menu_item:nth-child(1) {
  transition-delay: 0.25s;
}

.menu_item:nth-child(2) {
  transition-delay: 0.35s;
}

.menu_item:nth-child(3) {
  transition-delay: 0.45s;
}

.menu_item:nth-child(4) {
  transition-delay: 0.55s;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}