SASS\SCSS: селекторы разделенные запятой

363

30 января 2017, 18:30

Есть подобный код на CSS

#content .page_header_wrap header>h1.entry-title, .woocommerce .entry-header h1.entry-title {
    font-family: LatoWebThin;
    font-size: 50px;
}

Столкнулся с тем что не могу понять как правильно в SASS\ SCSS обработать разделение запятой?

$font_family_1: LatoWebThin;
#content {
    .page_header_wrap {
        header {
            >h1.entry-title {
                font-family: $font_family_1;
                font-size: 50px;
            }
        }
    }
}
.woocommerce {
    .entry-header {
        h1.entry-title {
            font-family: $font_family_1;
            font-size: 50px;
        }
    }
}

Кода получается в два раза больше. Как данная задача правильно решается в SASS\ SCSS ?

Answer 1

вы должны использовать плейсхолдеры

%awesome {
      font-family: $font_family_1;
      font-size: 50px;
}
#content .page_header_wrap header>h1.entry-title {
    @extend %awesome;
}
.woocommerce .entry-header h1.entry-title {
    @extend %awesome;
}