There is a similar code on CSS

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

Faced with the fact that I can not understand how to handle the comma separation in SASS \ SCSS correctly?

 $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; } } }

The code turns out twice. How is this problem properly solved in SASS \ SCSS ?

  • you can use mixin and cycles - Grundy

1 answer 1

you must use placeholders

 %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; }

PS make a hierarchy, if necessary ...

  • Hmm ... I know the approach with classes, but the code is still more than CSS (I hoped that it could be solved by an operator somehow - user199588
  • after conversion to CSS, there will be no more code, since @extend converted to a comma - separated entry - Sasha Omelchenko
  • one
    @ user199588 What I wrote, on output 1 to 1 is your css. But SASS gives you additional convenience - you can create a placeholder in the base file, and use it in other files ... then making changes to the placeholder, it will automatically change in the right places in the finished css - Alex