Bootstrap 4 Example SASS Base File

_base.scss

// ============= FONTS ============== //
$font-header: 'Source Serif Pro', serif;
$font-paragraph: "Khula", sans-serif;
$font-b-paragraph: "Baskerville", sans-serif;

// ============= COLORS ============== //
$color-primary: #cf5d00;
$color-secondary: #273E47;
$color-black: #0F0A0A;    

// ============= MIXINS ============== //
// Extra small devices (portrait phones, less than 576px)
@mixin atSmall {
    @media (min-width: 576px) {
        @content;
    }
}

@mixin atMedium {
    @media (min-width: 768px) {
        @content;
    }
}

@mixin atLarge {
    @media (min-width: 992px) {
        @content;
    }
}

@mixin atXLarge {
    @media (min-width: 1200px) {
        @content;
    }
}

// ============= BASE ============== //
body {
    font-family: $font-paragraph;
}

h1, h2, h3, h4, h5, h6 {
    font-family: $font-header;
}

h1, h2, h3 {
    font-weight: 900;
}

p {
    font-family: $font-paragraph;
}


// ============= Misc. ============== //
// Remove bottom margin from jumbotrons
.jumbotron {
    margin-bottom: 0;
}

// Removing stupid focus underline 
a:focus {
    text-decoration: none;
    outline: none;
}