Created — forked from chriseppstein/0_selector_hacks.scss

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.

View 0_selector_hacks.scss
1 2 3 4 5 6
@mixin ie6 { * html & { @content } }
 
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
View 0_selector_hacks.scss
1 2 3 4 5 6 7 8
=ie6
* html &
@content
 
#logo
background-image: url("/images/logo.png")
+ie6
background-image: url("/images/logo.gif")
View 0_selector_hacks.scss
1 2
#logo { background-image: url("/images/logo.png"); }
* html #logo { background-image: url("/images/logo.gif"); }
View 0_selector_hacks.scss
1 2 3 4 5 6 7 8 9 10
@mixin keyframes {
@-moz-keyframes { @content; }
@-webkit-keyframes { @content; }
}
 
 
@include keyframes {
0% { opacity: 0; }
100% { opacity: 1; }
}
View 0_selector_hacks.scss
1 2 3 4 5 6 7 8 9 10 11 12
=keyframes
@-moz-keyframes
@content
 
@-webkit-keyframes
@content
 
+keyframes
0%
opacity: 0
100%
opacity: 1
View 0_selector_hacks.scss
1 2 3 4 5 6 7 8 9
@-moz-keyframes {
0% { opacity: 0; }
100% { opacity: 1; }
}
 
@-webkit-keyframes {
0% { opacity: 0; }
100% { opacity: 1; }
}
View 0_selector_hacks.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: 479px) { @content; }
}
@else if $media == wide-handhelds {
@media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
}
@else if $media == tablets {
@media only screen and (min-width: 768px) and (max-width: 959px) { @content; }
}
}
 
#sidebar {
float: left;
width: 300px;
@include respond-to(handhelds) { float: none; }
@include respond-to(wide-handhelds) { float: none; }
@include respond-to(tablets) { width: 240px; }
}
View 0_selector_hacks.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
=respond-to($media)
@if $media == handhelds
@media only screen and (max-width: 479px)
@content
@else if $media == wide-handhelds
@media only screen and (min-width: 480px) and (max-width: 767px)
@content
@else if $media == tablets
@media only screen and (min-width: 768px) and (max-width: 959px)
@content
 
#sidebar
float: left
width: 300px
+respond-to(handhelds)
float: none
 
+respond-to(wide-handhelds)
float: none
 
+respond-to(tablets)
width: 240px
View 0_selector_hacks.scss
1 2 3 4
#sidebar { float: left; width: 300px; }
@media only screen and (max-width: 479px) { #sidebar { float: none; } }
@media only screen and (min-width: 480px) and (max-width: 767px) { #sidebar { float: none; } }
@media only screen and (min-width: 768px) and (max-width: 959px) { #sidebar { width: 240px; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.