Created
February 6, 2012 21:51
-
-
Save jcroft/1755160 to your computer and use it in GitHub Desktop.
What I really want in Sass: a syntax for doing media queries inside a selector or mixin...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Typical grid column mixin.. | |
=column($percent) | |
width: $percent | |
float: left | |
// Fancy new pseudo-selector syntax for media queries which would let my | |
// column from above switch to 100% when the window got narrower than 600px... | |
&@media only screen and (min-width: 600px) | |
width: 100% | |
// Apply the mixin to some elements... | |
#main-content | |
+column(70%) | |
#sidebar | |
+column(30%) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Output... | |
#main-content { | |
width: 70%; | |
float: left; | |
} | |
#sidebar { | |
width: 30%; | |
float: left; | |
} | |
@media only screen and (min-width: 600px) { | |
#main-content { | |
width: 100%; | |
} | |
#sidebar { | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Doh! Just realized this is actually already possible with Sass. Nevermind!