I use stylus . There is a $font-size = 1em variable that is used throughout the project. It is necessary that on small devices ( @media screen and (max-device-width: 768px) ), $font-size 2em to 2em . I tried to use if , did not work.

    2 answers 2

    You want too much from the preprocessor. As far as I know, their behavior is not regulated by the rules. Your desired behavior can be achieved using custom properties :

     :root { --fz: 2em; } .block { font-size: var(--fz); } @media (max-width: 700px) { :root { --fz: 1em; } } 
     <div class="block">This is text</div>

    Using preprocessors, you need to create mixins with the properties you need, pass variables to them, and in media expressions, call mixins again with new variable values ​​in order to override the properties. For example:

     my-custom-block(fz) border-radius 5px border 1px solid font-size fz margin fz my-custom-block(2em) @media screen and (max-width: 700px) my-custom-block(1em)
    • It worked! Thank you very much! - Linda Lee
    • @LindaLi only note that the browser support for custom properties is not the most rosy, so far it’s the future. but maybe there are good polyfills, I don't know. - Sasha Omelchenko
    • In any case, I will test everything. While on my phone works, so thank you) - Linda Lee
    • one
      Cross-browser compatibility is crying for this implementation option :) I hope in the future ... - Yuri

    If I understood correctly, then in this way:

    In head write:

     <meta name="viewport" content="width=device-width, initial-scale=1">

    And in CSS, apply styles via media:

     @media screen and (min-width: 769px) { elem {font-size: 1em;} } @media screen and (max-width: 768px) { elem {font-size: 2em;} }
    • I have this variable used in many places, so I would like to change it in one place, and not to prescribe for each element. Otherwise, the meaning of variables is completely lost - Linda Lee
    • @ Linda, but not through parents? Specify the font to one parent and through it apply the font to the children? - Yuri
    • General parent body - Linda Lee
    • @LindaLee, or you can through a special class. For example, you can create a class font-default - Yuri