Sass Mixins

by Michael Mandarino

HTML

<h1>Sass Mixins - v3.7</h1>
<h2>Last Update: August 28th 2019 by Michael Mandarino</h2>

SCSS

/* Base Styles */

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

body {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 16px;
    padding: 0.5em;
}

h1 {
	color: #61bb46;
    font-size: 2em;
}

h2 {
    font-size: 0.75em;
    margin-bottom: 1em;
}

/*--------------------------------------------------------------
==== MIXINS v3.4 ====
--------------------------------------------------------------*/
/*--------------------------------------------------------------
-- SITE MARGINS - V3.0
--------------------------------------------------------------*/
@mixin site-margins($sm_maxwidth, $sm_padding_mobile, $sm_padding_tablet, $sm_padding_desktop, $sm_padding_desktop_large ) {
    margin: 0 auto;
    max-width: $sm_maxwidth;
    max-width: calc(#{$sm_maxwidth} + (#{$sm_padding_mobile} * 2));
    padding-left: $sm_padding_mobile;
    padding-right: $sm_padding_mobile;
    width: 100%;

    @include breakpoint(tablet) {
        max-width: calc(#{$sm_maxwidth} + (#{$sm_padding_tablet} * 2));
        padding-left: $sm_padding_tablet;
        padding-right: $sm_padding_tablet;
    }

    @include breakpoint(desktop) {
        max-width: calc(#{$sm_maxwidth} + (#{$sm_padding_desktop} * 2));
        padding-left: $sm_padding_desktop;
        padding-right: $sm_padding_desktop;
    }

    @include breakpoint(desktop_large) {
        max-width: calc(#{$sm_maxwidth} + (#{$sm_padding_desktop_large} * 2));
        padding-left: $sm_padding_desktop_large;
        padding-right: $sm_padding_desktop_large;
    }
}

/*------------------------------------------------------------
-- MEDIA QUERIES
--------------------------------------------------------------*/
/*** BREAKPOINTS - MIN-WIDTH ***/
@mixin breakpoint($min_point) {
    @media (min-width: $min_point) {
        @content;
    }
}
/*** BREAKPOINTS - MAX-WIDTH - (Minus 1) ***/
@mixin breakpoint-max($max_point) {
    @media (max-width: $max_point - 1) {
        @content;
    }
}
/*** BREAKPOINTS - MAX-WIDTH -...