Scss

==========================================
colors.scss
==========================================

$colors: (Kievy: (bg-header: #33363b,
        bg-body: #f2f2f2),

    Bootstrap: (bg-primary: #0d6efd,
        bg-secondary: #6c757d,
        bg-success: #28a745,
        bg-danger: #dc3545,
        bg-warning: #ffc107,
        bg-info: #17a2b8,
        bg-light: #f8f9fa,
        bg-dark: #343a40,
        bg-white: #fff));

==========================================
function.scss
==========================================

@function color ($library, $color) {
    @return map-get(map-get($colors, $library), $color)
}

==========================================
heading.scss
==========================================

.h1,
h1 {
    font-size: calc(1.375rem + 1.5vw)
}

@media (min-width:1200px) {

    .h1,
    h1 {
        font-size: 2.5rem
    }
}

.h2,
h2 {
    font-size: calc(1.325rem + .9vw)
}

@media (min-width:1200px) {

    .h2,
    h2 {
        font-size: 2rem
    }
}

.h3,
h3 {
    font-size: calc(1.3rem + .6vw)
}

@media (min-width:1200px) {

    .h3,
    h3 {
        font-size: 1.75rem
    }
}

.h4,
h4 {
    font-size: calc(1.275rem + .3vw)
}

@media (min-width:1200px) {

    .h4,
    h4 {
        font-size: 1.5rem
    }
}

.h5,
h5 {
    font-size: 1.25rem
}

.h6,
h6 {
    font-size: 1rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}