Skip to content

Instantly share code, notes, and snippets.

@muchirijane
Last active December 14, 2021 18:34
Show Gist options
  • Save muchirijane/1398906b2405e78e6fe0a0e6d7a96544 to your computer and use it in GitHub Desktop.
Save muchirijane/1398906b2405e78e6fe0a0e6d7a96544 to your computer and use it in GitHub Desktop.
Sass file boilerplate for the index.scss
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment