roroland

// Custom properties to Sass fallback
// @params {String}: $customProp, $renderedValue

// Sass Variables
$color-base: #000000;
$color-base-darkest: #0b0b0b;
$color-base-darker: lighten($color-base, 20);
$color-base-dark: lighten($color-base, 40);
$color-base-light: lighten($color-base, 60);
$color-base-lighter: lighten($color-base, 80);

roroland

html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

roroland

 html {
  box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}

roroland

Ctrl+k , Ctrl+f

roroland

%animal {
    background: gray;
    // and so on...
}
.cat {
    @extend %animal;
    color: white;
}
.dog {
    @extend %animal;

roroland

@mixin only-for-mobile {
    @media (max-width: 768px) {
        @content;
    }
}

@include only-for-mobile() /* note: @content begins here */ {
    p {
        font-size: 150%;
    }

roroland

$alertClass: "error";

p.message-#{$alertClass} {
    color: red;
}

$breakpoint: 768px;

@media (max-width: #{$breakpoint}) {
    /* This block only applies to viewports <= #{$breakpoint} wide... */