Sass file boilerplate for the index.scss

sass

index.scss

// configuration and helpers (abstracts) variables, mixins and functions
@import "abstracts/variables";

//base styles (reset, font, typography, utilities etc)
@import "base/base";

//colours

//layout related sections (navbar, footer, etc)

//components (buttons, cards, navbar, etc)

//utilities (e.g. flexbox, grid, margin, padding, opacity etc)

//page specific styles


/******************* Using math functions *********************/
@use 'sass:math';

@debug calc(100% - $base-padding * 2);
@debug math.max(1px, 2px, 40px);
@debug math.min(1px, 2px, 40px);
@debug math.floor(1.5);


/***************** COLOR THEME ************************/
$colors: (
  "primary": (
    "base": $primary-base,
    "light": $primary-light,
    "dark": $primary-dark,
  ),
  "secondary": (
    "base": $secondary-base,
    "light": $secondary-light,
    "dark": $secondary-dark,
  ),
);

@debug map-get ($colors, "primary", "base"); // #00bcd4
@debug map-has-key($colors, "primary", "base"); //true

@debug map-get(
  $colors,
  "primary",
  "base"
); // shows the base colour of the primary colour

@debug map-has-key(
  $colors,
  "primary",
  "base"
); // returns true if the key exists

@debug map-remove(
  $colors,
  "primary",
  "base"
); // removes the key "base" from the map

@debug map-keys($colors); //shows the keys of the map

@debug map-merge( $colors, ("pink": #ffa8e5) ); //merges the map with the new key"))

// using map in classes
.test {
  color: $primary-base;
}

.test-btn {
  background-color: map-get($colors, "primary", "base");
}

//************* Using loop for the theme colors *********/$colors: (
  "primary": (
    "base": $primary-base,
    "light": $primary-light,
    "dark": $primary-dark,
  ),
  "secondary": (
    "base": $secondary-base,
    "light": $secondary-light,
    "dark": $secondary-dark,
  ),
);


// we generate classes with the colors
@each $key, $tags in $colors {
  @each $tag, $val in $tags {
    .cl-#{$key}-#{$tag} {
      color: $val;
    }
    .bg-#{$key}-#{$tag} {
      background-color: $val;
    }
    
    
     //light variations
    @for $i from 1 through 5 {
      .cl-#{$key}-#{$tag}-light-#{$i} {
        color: mix(white, $val, $i * 10%);
      }
      .bg-#{$key}-#{$tag}-light-#{$i} {
        background-color: mix(white, $val, $i * 10%);
      }
    }

    @for $i from 1 through 5 {
      .cl-#{$key}-#{$tag}-dark-#{$i} {
        color: mix(rgb(0, 0, 0), $val, $i * 10%);
      }
      .bg-#{$key}-#{$tag}-dark-#{$i} {
        background-color: mix(black, $val, $i * 10%);
      }
    }
  }
}

//**************************purge your css  *************************/
- install
npm install --save-dev gulp-purgecss

- Add the purge  pipe function to the gulp file and edit 
the watch function to update the html changes when you add or remove the html content

```js
const purgecss = require("gulp-purgecss");

function buildStyles() {
  return src("src/styles/**/*.scss")
    .pipe(sass())
    .pipe(purgecss({ content: ["*.html"] }))
    .pipe(dest("css/styles"));
}
function watchStyles() {
  watch(["src/styles/**/*.scss", "*.html"], buildStyles);
}
```


//***************** mixin ***************** //
// 1em = 16px
@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media only screen and (max-width: 37.5em) {
      @content;
    } // 600px/16px
  }
  @if $breakpoint == tab-potrait {
    @media only screen and (max-width: 56.25em) {
      @content;
    }
  }
  @if $breakpoint == tab-landscape {
    @media only screen and (max-width: 75em) {
      @content;
    }
  }
  @if $breakpoint == big-desktop {
    @media only screen and (min-width: 112.5em) {
      @content;
    }
  }
}


.test-btn {
  background-color: map-get($colors, "primary", "base");

  @include respond(phone) {
    background-color: #000;
  }
}