This doesn't work properly with .sass files when I do: +breakpoint(300px) .box color:red it output this: @media and (min-width: 300px) { .box { color: red; } } The "and" didn''t make it work, so I have to create this mixing: //set some variables first $mw:min-width $phone:300px //then the mixing =mq($vw,$w) @media($vw: $w) @content //example +mq($mw, $phone) .box color:red this is the result now: @media(min-width: 300px) { .box { color: red; }
I think the problem with this method is that the output has a lot of repeating media queries, however, the best practice is to define each media querie only once.
Hi Emanuel. Thanks for the comment! I use gulp-combine-media-queries for that (it also exists for Grunt). Also, it shouldn't be a problem if you gzip your files. Gzip eats repetition for breakfast.
Glad you like it. I'm using the Suit CSS naming conventions, that's where the camel case in the class names come from. (github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
Awesome, was looking for simple way to get IE8 to understand media queries without js, Thanks for a very good tuts+
Thanks a lot !!
I love it
This doesn't work properly with .sass files
when I do:
+breakpoint(300px)
.box
color:red
it output this:
@media and (min-width: 300px) {
.box {
color: red; }
}
The "and" didn''t make it work, so I have to create this mixing:
//set some variables first
$mw:min-width
$phone:300px
//then the mixing
=mq($vw,$w)
@media($vw: $w)
@content
//example
+mq($mw, $phone)
.box
color:red
this is the result now:
@media(min-width: 300px) {
.box {
color: red; }
I cannot get it to compile, am I missing a step?
I think the problem with this method is that the output has a lot of repeating media queries, however, the best practice is to define each media querie only once.
Hi Emanuel. Thanks for the comment!
I use gulp-combine-media-queries for that (it also exists for Grunt). Also, it shouldn't be a problem if you gzip your files. Gzip eats repetition for breakfast.
***** I did some research and you're right! Good to know. Thanks, Joren!
Having CSS selectors in camel case is something I would never personally encourage to do, good stuff otherwise.
Glad you like it. I'm using the Suit CSS naming conventions, that's where the camel case in the class names come from. (github.com/suitcss/suit/blob/master/doc/naming-conventions.md)