SCSS Mixix Example. #sass #scss #demo

gistfile1.sass

// example of string interpolation in a mixin
// matches a particular color and image together following a naming scheme for the images

$green: #7bd939;
$orange: #de712c;

@mixin sectionhead($color, $name) {
    .section-head {
        background-color: $color;
        background-image: url('../../images/masthead-' + $name + '.jpg');
        
        span {
            background-image: url('../../images/masthead-' + $name + '.jpg');
        }
    }
}

#foo {
    @include sectionhead($orange, 'orange');
}

#bar {
    @include sectionhead($green, 'green');
}