There is a sass code

%btn{ font-size:12px; background:#cecece; } .header_btn{ @extend %btn; width:100px; }

it is converted to such waters css

 .header_btn { font-size: 12px; background: #cecece; } .header_btn { width: 100px; }

How to make it so that there is only one selector in which all these properties will be located, because if you leave it so much fuck up (

  • What is this sucks? - etki

2 answers 2

Most likely, it seems to you that sass is eating extra bytes. In this microprimer, this is indeed the case, but just @extend does not work the way you expect: instead of pushing the extend properties to each selector, it shoves the selectors to one extend in order not to repeat the code:

 .s unicorn: true .b @extend .s .d @extend .s

->

 .s, .b, .d { unicorn: true; } /*# sourceMappingURL=t.css.map */

In the case when a piece is inherited at least a hundred bytes, it gives a very non-acidic saving, rather than pushing these properties into each selector.

    Autogenerated files (and css, generated by sass is an autogenerated file) are not intended for human reading. As long as in the browser, this style sheet works as intended - there is no reason to “fix” it.

    • 1. And in the browser styles to watch? 2. Excess volume. - Qwertiy ♦
    • one
      Excess volume? First, CSS can be minifit, try copying your code from a question in cssminifier.com , for example. Including full scripts for minifay production. Secondly, text content is transmitted in compressed gzip from server to browser in 90% of cases. - Sergey Snegirev pm
    • @PavelMayorov Minification throws all spaces, enterters, comments. Does a minification algorithm add properties to a single selector if it repeats? (Using gulp-minifycss) - WebWorkDeveloper