jackrabbit-d
10/18/2017 - 1:57 PM

Kev's Silly Breakpoint Thing that CK Ruined

// Create Mixin

@mixin break($p, $b: 'max-width'){
    @media screen and ( $b: $p + px ){
        @content;
    }
}

// Use Case: $b (second) variable is optional and defaults to 'max-width'

@include break(1100){
    h1{
        background: red;
    }
}

// Output
@media screen and (max-width: 1100px) { 
    h1 { background: red; }
}

// Also, if you want to specify the 2nd variable for break type (i.e., min-height)

@include break(1100, 'min-height'){
    h1 {
        background:red;
    }
}

// Output
@media screen and (min-height: 1100px) { 
    h1 { background: red; }
}