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

Есть подобный код на 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 ?

Ответ

вы должны использовать плейсхолдеры
%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; }
P.S. иерархию сделаете, если нужно...