css - Nested media queries output -

i've switched sass less (work) , wondering if possible output less (using mixin):

footer {   width: 768px;    @media screen , (min-width: 992px) {     width:900px;    }    @media screen , (min-width: 1200px) {      width:1200px;    } } 

i can seem output in separate breakpoints (instead of under selector):

@media screen , (min-width: 720px) , (max-width: 959px) {  footer {   width: 768px;  } } @media screen , (min-width: 960px) , (max-width: 1199px) {  footer {    width: 3939px;  } } 

this mixin i've been using:

.respond-to(@respondto; @rules) when (@respondto = "lg") {   @media screen , (min-width: 1200px) {     @rules();   } } .respond-to(@respondto; @rules) when (isnumber(@respondto)) {   @media screen , (min-width: @respondto) {    @rules();   } } 

and using so:

div.class {    .respond-to(120px, {      float:left;    });    .respond-to("lg", {      float:none;    }); } 

any appreciated!

short answer:

no, cannot output require using less mixins (unless end doing ugly hacks).

long answer:

less, sass etc (as know) css pre-processors. main usage enable writing of dry code , quicker creation of css (there other perks, these primary reasons use them). pre-processor hence of no use if produces output not valid css code - because css gets used in projects.

the below snippet not valid css because such structure not supported , less never produce output that.

^{note: valid less code structure because less supports nesting of selectors , media queries.}

footer {   width: 768px;    @media screen , (min-width: 992px) {     width:900px;    }    @media screen , (min-width: 1200px) {      width:1200px;    } } 

below snippet show had meant not valid css. check how media queries affect color not background.

/* invalid css */  footer {    background: beige;     @media screen , (min-width: 600px) {      background: blue;     }     @media screen , (min-width: 700px) {       background: green;     }  }    /* valid css */    footer {    color: red;  }  @media screen , (min-width: 600px) {    footer{      color: blue;    }  }  @media screen , (min-width: 700px) {    footer{      color: green;    }  }

<footer>this footer</footer>

---

coming mixin, re-write in below snippet

.respond-to(@respondto; @rules){      & when (@respondto = "lg") {       @media screen , (min-width: 1200px) {         @rules();       }     }     & when (isnumber(@respondto)) {       @media screen , (min-width: @respondto) {        @rules();       }     } } 

or 1 below keep code dry.

.respond-to(@respondto; @rules){   .set-width(@respondto); // call set media query width depending on input   @media screen , (min-width: @width) {     @rules();   } } .set-width(@respondto) when (@respondto = "lg") {   @width: 1200px; } .set-width(@respondto) when (isnumber(@respondto)) {   @width: @respondto; }