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)
// $name = key, $size = value
@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
// Keys must not contain spaces or special characters
// Values can be 'string', integers, booleans
$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;
    }
}

// Tip: Calculate percentage for responsive design
@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

.my-module {
    width: calc-percent(650px, 1000px);
}


$list1: 200px;
$list2: 1px 2px 3px black;

// SASS 'length' function (takes 1 arg - the list)
.lenght {
    content: length($list1);
}

// SASS 'nth()' function (takes 2 args - the list, target)
.nth {
    content: nth($list2, 2);
}

// SASS 'set-nth()' function (takes 3 args - the list, target, new value)
// it replaces the item and produces the result
.nth-child {
    content: set-nth($list2, 2, 10px);
}

// SASS 'join()' function (takes 3 args - the list, other list, optional seperator)
// 'comma', 'space (default)'
.join {
    content: join($list1, $list2, comma);
}
// You can join a customa value using just one list as arg + 'custom value', seperator
.join-custom {
    content: join($list1, 'sans-serif', comma);
}

// SASS append() - more specific than join()
.append {
    content: append($list1, 'something', comma);
}

// SASS index() - returns the position of something in a list
// Takes 2 args - the list to inspect, what you want (case sensitive)
// if nested list, you need to type all values of the list
.index {
    content: index($list2, black);
}

// SASS zip() function for combining values into muli-dementional list
// In this example: Produces a list with 1 value of each list seperated by ','
// The result is 4 lists (amount of items) with one value of each passed in
// "1px 2em blue, 2px 3em green, 3px 4em orange, 4px 5em grey"
.zip {
    content: zip(
        1px 2px 3px 4px,
        2em 3em 4em 5em,
        blue green orange grey,
    )
}

// Zip with pre-defined zips
$zip1: 1px 2px 3px 4px;
$zip2: 2em 3em 4em 5em;
$zip3: blue green orange grey;

.zip-list {
    content: zip($zip1, $zip2, $zip3);
}

// Variable arguments (arglist): we make it possible to pass any number of arguments
// without '...', only the first arg will be used
@mixin shadows($shadows...) {
    box-shadow: $shadows;
}

.shadows {
    @include shadows(1px, 2px, 3px, rgba(black, .5))
}

// another example of 'arglist'
@mixin linear-gradient($direction, $gradients...) {
  background-color: nth($gradients, 1); // in call below = 'magenta'
  background-image: linear-gradient($direction, $gradients...);
}

.selector {
  @include linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);
}

// Setting defaults in arguments
@function dummy($a, $b, $c: "default") {
    // do stuff
}

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;
}

.my-module {
  width: 65%;
}

.lenght {
  content: 1;
}

.nth {
  content: 2px;
}

.nth-child {
  content: 1px 10px 3px black;
}

.join {
  content: 200px, 1px, 2px, 3px, black;
}

.join-custom {
  content: 200px, "sans-serif";
}

.append {
  content: 200px, "something";
}

.index {
  content: 4;
}

.zip {
  content: 1px 2em blue, 2px 3em green, 3px 4em orange, 4px 5em grey;
}

.zip-list {
  content: 1px 2em blue, 2px 3em green, 3px 4em orange, 4px 5em grey;
}

.shadows {
  box-shadow: 1px, 2px, 3px, rgba(0, 0, 0, 0.5);
}

.selector {
  background-color: magenta;
  background-image: linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);
}

settings.json

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