Applying a set of styles both with a media query and with nested rules Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?

AppleTVs create a chatty alternate WiFi network

Why not use the yoke to control yaw, as well as pitch and roll?

If Windows 7 doesn't support WSL, then what is "Subsystem for UNIX-based Applications"?

What are the main differences between the original Stargate SG-1 and the Final Cut edition?

Weaponising the Grasp-at-a-Distance spell

What does Turing mean by this statement?

Most effective melee weapons for arboreal combat? (pre-gunpowder technology)

Putting class ranking in CV, but against dept guidelines

Was Kant an Intuitionist about mathematical objects?

Why weren't discrete x86 CPUs ever used in game hardware?

Is there any word for a place full of confusion?

As a dual citizen, my US passport will expire one day after traveling to the US. Will this work?

Is it dangerous to install hacking tools on my private linux machine?

What is a more techy Technical Writer job title that isn't cutesy or confusing?

In musical terms, what properties are varied by the human voice to produce different words / syllables?

Resize vertical bars (absolute-value symbols)

Project Euler #1 in C++

What initially awakened the Balrog?

Sally's older brother

Can humans save crash-landed aliens?

Tannaka duality for semisimple groups

what is the log of the PDF for a Normal Distribution?

Is it possible for SQL statements to execute concurrently within a single session in SQL Server?

Delete free apps from Play Store library



Applying a set of styles both with a media query and with nested rules



Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








1












$begingroup$


I am working on an application which responds to different screen resolutions. At a certain minimum DPI, we want to apply a set of styles. We also want to apply that same set of styles if the class hidpi is present on the root html element. Our project uses LESS.



This is the code I inherited. I've replaced the styles with some placeholders for the sake of this question (so don't mind the colors):




@media all and (min-resolution: 96dpi) 
.foo
color: "maize";

.bar
color: "blue";



html.hidpi
.foo
color: "maize";

.bar
color: "blue";





Attempt at reducing duplication



As you can see, the code between the media query and html.hidpi is exactly the same, so I figured I should be able to reduce duplication. I came up with a solution using a mixin:



.mixinHidpi() 
.foo
color: "maize";

.bar
color: "blue";



@media all and (min-resolution: 96dpi)
.mixinHidpi();


html.hidpi
.mixinHidpi();



Can any more be done to reduce duplication? Are there any problems with the way I'm doing things now? In particular, I've only ever seen very simple examples of using mixins, so I'm not sure if I'm using them in the way they are supposed to be used.










share|improve this question











$endgroup$




bumped to the homepage by Community 17 mins ago


This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.





















    1












    $begingroup$


    I am working on an application which responds to different screen resolutions. At a certain minimum DPI, we want to apply a set of styles. We also want to apply that same set of styles if the class hidpi is present on the root html element. Our project uses LESS.



    This is the code I inherited. I've replaced the styles with some placeholders for the sake of this question (so don't mind the colors):




    @media all and (min-resolution: 96dpi) 
    .foo
    color: "maize";

    .bar
    color: "blue";



    html.hidpi
    .foo
    color: "maize";

    .bar
    color: "blue";





    Attempt at reducing duplication



    As you can see, the code between the media query and html.hidpi is exactly the same, so I figured I should be able to reduce duplication. I came up with a solution using a mixin:



    .mixinHidpi() 
    .foo
    color: "maize";

    .bar
    color: "blue";



    @media all and (min-resolution: 96dpi)
    .mixinHidpi();


    html.hidpi
    .mixinHidpi();



    Can any more be done to reduce duplication? Are there any problems with the way I'm doing things now? In particular, I've only ever seen very simple examples of using mixins, so I'm not sure if I'm using them in the way they are supposed to be used.










    share|improve this question











    $endgroup$




    bumped to the homepage by Community 17 mins ago


    This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

















      1












      1








      1





      $begingroup$


      I am working on an application which responds to different screen resolutions. At a certain minimum DPI, we want to apply a set of styles. We also want to apply that same set of styles if the class hidpi is present on the root html element. Our project uses LESS.



      This is the code I inherited. I've replaced the styles with some placeholders for the sake of this question (so don't mind the colors):




      @media all and (min-resolution: 96dpi) 
      .foo
      color: "maize";

      .bar
      color: "blue";



      html.hidpi
      .foo
      color: "maize";

      .bar
      color: "blue";





      Attempt at reducing duplication



      As you can see, the code between the media query and html.hidpi is exactly the same, so I figured I should be able to reduce duplication. I came up with a solution using a mixin:



      .mixinHidpi() 
      .foo
      color: "maize";

      .bar
      color: "blue";



      @media all and (min-resolution: 96dpi)
      .mixinHidpi();


      html.hidpi
      .mixinHidpi();



      Can any more be done to reduce duplication? Are there any problems with the way I'm doing things now? In particular, I've only ever seen very simple examples of using mixins, so I'm not sure if I'm using them in the way they are supposed to be used.










      share|improve this question











      $endgroup$




      I am working on an application which responds to different screen resolutions. At a certain minimum DPI, we want to apply a set of styles. We also want to apply that same set of styles if the class hidpi is present on the root html element. Our project uses LESS.



      This is the code I inherited. I've replaced the styles with some placeholders for the sake of this question (so don't mind the colors):




      @media all and (min-resolution: 96dpi) 
      .foo
      color: "maize";

      .bar
      color: "blue";



      html.hidpi
      .foo
      color: "maize";

      .bar
      color: "blue";





      Attempt at reducing duplication



      As you can see, the code between the media query and html.hidpi is exactly the same, so I figured I should be able to reduce duplication. I came up with a solution using a mixin:



      .mixinHidpi() 
      .foo
      color: "maize";

      .bar
      color: "blue";



      @media all and (min-resolution: 96dpi)
      .mixinHidpi();


      html.hidpi
      .mixinHidpi();



      Can any more be done to reduce duplication? Are there any problems with the way I'm doing things now? In particular, I've only ever seen very simple examples of using mixins, so I'm not sure if I'm using them in the way they are supposed to be used.







      mixins less-css






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 26 '18 at 0:48









      200_success

      131k17157422




      131k17157422










      asked Oct 21 '16 at 19:29









      Frank TanFrank Tan

      1065




      1065





      bumped to the homepage by Community 17 mins ago


      This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.







      bumped to the homepage by Community 17 mins ago


      This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.






















          1 Answer
          1






          active

          oldest

          votes


















          0












          $begingroup$

          You usage of the mixin will work and although it is not pretty there is not much else that can be done as far as valid LESS / CSS output.



          I've written up an example of complex mixins like below.
          LESS lazy mixin for element width/height/float



          As well as one that might be on track with what you are trying to accomplish.
          https://stackoverflow.com/questions/39338429/less-outputs-extra-semicolon



          Keep in mind that this using a JavaScript array in a hacky type mannor and the output would still need to be sanitized of the extrenious code that is not valid. But I think we are both headed in the same direction.






          share|improve this answer











          $endgroup$













            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "196"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f144912%2fapplying-a-set-of-styles-both-with-a-media-query-and-with-nested-rules%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0












            $begingroup$

            You usage of the mixin will work and although it is not pretty there is not much else that can be done as far as valid LESS / CSS output.



            I've written up an example of complex mixins like below.
            LESS lazy mixin for element width/height/float



            As well as one that might be on track with what you are trying to accomplish.
            https://stackoverflow.com/questions/39338429/less-outputs-extra-semicolon



            Keep in mind that this using a JavaScript array in a hacky type mannor and the output would still need to be sanitized of the extrenious code that is not valid. But I think we are both headed in the same direction.






            share|improve this answer











            $endgroup$

















              0












              $begingroup$

              You usage of the mixin will work and although it is not pretty there is not much else that can be done as far as valid LESS / CSS output.



              I've written up an example of complex mixins like below.
              LESS lazy mixin for element width/height/float



              As well as one that might be on track with what you are trying to accomplish.
              https://stackoverflow.com/questions/39338429/less-outputs-extra-semicolon



              Keep in mind that this using a JavaScript array in a hacky type mannor and the output would still need to be sanitized of the extrenious code that is not valid. But I think we are both headed in the same direction.






              share|improve this answer











              $endgroup$















                0












                0








                0





                $begingroup$

                You usage of the mixin will work and although it is not pretty there is not much else that can be done as far as valid LESS / CSS output.



                I've written up an example of complex mixins like below.
                LESS lazy mixin for element width/height/float



                As well as one that might be on track with what you are trying to accomplish.
                https://stackoverflow.com/questions/39338429/less-outputs-extra-semicolon



                Keep in mind that this using a JavaScript array in a hacky type mannor and the output would still need to be sanitized of the extrenious code that is not valid. But I think we are both headed in the same direction.






                share|improve this answer











                $endgroup$



                You usage of the mixin will work and although it is not pretty there is not much else that can be done as far as valid LESS / CSS output.



                I've written up an example of complex mixins like below.
                LESS lazy mixin for element width/height/float



                As well as one that might be on track with what you are trying to accomplish.
                https://stackoverflow.com/questions/39338429/less-outputs-extra-semicolon



                Keep in mind that this using a JavaScript array in a hacky type mannor and the output would still need to be sanitized of the extrenious code that is not valid. But I think we are both headed in the same direction.







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited May 23 '17 at 12:40









                Community

                1




                1










                answered Nov 1 '16 at 18:18









                googabeastgoogabeast

                636




                636



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Code Review Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    Use MathJax to format equations. MathJax reference.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f144912%2fapplying-a-set-of-styles-both-with-a-media-query-and-with-nested-rules%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    名間水力發電廠 目录 沿革 設施 鄰近設施 註釋 外部連結 导航菜单23°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.7113923°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.71139計畫概要原始内容臺灣第一座BOT 模式開發的水力發電廠-名間水力電廠名間水力發電廠 水利署首件BOT案原始内容《小檔案》名間電廠 首座BOT水力發電廠原始内容名間電廠BOT - 經濟部水利署中區水資源局

                    Prove that NP is closed under karp reduction?Space(n) not closed under Karp reductions - what about NTime(n)?Class P is closed under rotation?Prove or disprove that $NL$ is closed under polynomial many-one reductions$mathbfNC_2$ is closed under log-space reductionOn Karp reductionwhen can I know if a class (complexity) is closed under reduction (cook/karp)Check if class $PSPACE$ is closed under polyonomially space reductionIs NPSPACE also closed under polynomial-time reduction and under log-space reduction?Prove PSPACE is closed under complement?Prove PSPACE is closed under union?

                    Is my guitar’s action too high? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)Strings too stiff on a recently purchased acoustic guitar | Cort AD880CEIs the action of my guitar really high?Μy little finger is too weak to play guitarWith guitar, how long should I give my fingers to strengthen / callous?When playing a fret the guitar sounds mutedPlaying (Barre) chords up the guitar neckI think my guitar strings are wound too tight and I can't play barre chordsF barre chord on an SG guitarHow to find to the right strings of a barre chord by feel?High action on higher fret on my steel acoustic guitar