3

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

1
  • можно использовать mixin и циклы
    – Grundy
    28 янв 2017 в 14:37

1 ответ 1

2

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

%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. иерархию сделаете, если нужно...

3
  • Хм... подоход с классами мне знаком, но кода все равно больше чем CSS( Я надеялся что это решается все таки каким нибудь оператором
    – user199588
    28 янв 2017 в 15:49
  • после преобразования в CSS, кода будет не больше, поскольку @extend преобразуется к записи через запятую 28 янв 2017 в 16:49
  • 1
    @user199588 То что я написал, на выходе 1 в 1 ваш css. Но SASS вам даёт дополнительные удобства - вы плэйсхолдер можете создать в базовом файле, а использовать его в других файлах... потом внеся изменения в плэйсхолдере, оно автоматом измениться в нужных местах в готовом css
    – Alex
    28 янв 2017 в 16:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.