public

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

  • Download Gist
0_selector_hacks.scss
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"); }
}
1_selector_hacks.sass
Sass
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")
2_selector_hacks.css
CSS
1 2
#logo { background-image: url("/images/logo.png"); }
* html #logo { background-image: url("/images/logo.gif"); }
3_animation.scss
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; }
}
4_animation.sass
Sass
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
5_animation.css
CSS
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; }
}
6_media_queries.scss
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; }
}
7_media_queries.sass
Sass
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
8_media_queries.css
CSS
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; } }

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.