Using BEM with Sass is a joy for the eye

Using BEM with SASS can help you a lot to organize your CSS in a very clean way. This is a just a sample (.scss file) that shows how nice Sass and BEM can play together.

.blog-list {
    @extend %widget-spacing ;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "big big"
        "smallA smallB"
        "smallC smallD"
    ;

    @include breakpoint (medium) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
        "big big smallA smallB"
        "big big smallC smallD"
    ;

    }

    &__item {
        position: relative;
    }
    &__item-2 {
        grid-area: smallA;
    }
    &__item-3 {
        grid-area: smallB;
    }
    &__item-4 {
        grid-area: smallC;
    }
    &__item-5 {
        grid-area: smallD;
    }

    &__item-2,
    &__item-5 {
        background-color: $gray-9;
    }

    &__item-3,
    &__item-4 {
        background-color: $brand-red;
    }

    &__item--big {

        height: 312px;
        background-color: $black;
        grid-area: big;
        a {
            color: $white;
        }

        @include breakpoint (medium) {
            height: 330px;
        }
        @include breakpoint (large) {
            height: 450px;
        }
    }

    &__item--small {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 156px;
        @include breakpoint (medium) {
            height: auto;
        }
        text-align: center;
    }

}



.blog--redirect-url {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    &:active,
    &:hover,
    &:focus {
        background-color: $brand-red;
    }

    &--1 {
        justify-content: end;
    }

    &--3,
    &--4 {
            &:hover,
            &:focus,
            &:active {
            background-color: $brand-black;
            }
    }

}



.blog--teaser {

    &__overlay{
        padding: $column-gutter;
        text-align: center;
    }

    &__overlay-1 {
        display: block;
        width: 100%;
        background: rgba(31,35,39,.5);
    }

    &__title {
        color: $white;
        font-family: $font-raleway;
        font-weight: 700;
        font-style: normal;
        line-height: 20px;
        font-size: 13px;

        @include breakpoint(medium){
            font-size:14px;
            line-height:21px
        }

        @include breakpoint(large){
            font-size:16px;
            line-height:23px
        }
    }

    &__title--1 {

        font-size: 17px;
        line-height: 22px;

        @include breakpoint(medium){
            font-size: 20px;
            line-height: 25px;
        }

        @include breakpoint(large){
            font-size: 25px;
            line-height: 30px;
        }
    }

    &__created {
        color: #cecfd0;
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 10px;
        @include breakpoint(medium){
            font-size: .8rem;
        }
    }
}