Skip to content

Instantly share code, notes, and snippets.

@cbfrance
Forked from chriseppstein/0_selector_hacks.scss
Created March 31, 2012 02:31
Show Gist options
  • Save cbfrance/2258752 to your computer and use it in GitHub Desktop.
Save cbfrance/2258752 to your computer and use it in GitHub Desktop.
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
=ie6
* html &
@content
#logo
background-image: url("/images/logo.png")
+ie6
background-image: url("/images/logo.gif")
#logo { background-image: url("/images/logo.png"); }
* html #logo { background-image: url("/images/logo.gif"); }
@mixin keyframes {
@-moz-keyframes { @content; }
@-webkit-keyframes { @content; }
}
@include keyframes {
0% { opacity: 0; }
100% { opacity: 1; }
}
=keyframes
@-moz-keyframes
@content
@-webkit-keyframes
@content
+keyframes
0%
opacity: 0
100%
opacity: 1
@-moz-keyframes {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes {
0% { opacity: 0; }
100% { opacity: 1; }
}
@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; }
}
=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
#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