Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Created September 14, 2011 04:27
Show Gist options
  • Save chriseppstein/1215856 to your computer and use it in GitHub Desktop.
Save chriseppstein/1215856 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; } }
@ryanduffy
Copy link

As an IE 7 & 8 media queries workaround, I'm playing with the idea below.

Does anybody see any drawbacks to this? or maybe there's a better way?

@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; }
    .lt-ie9 & { @content; }
  }
}

@securitybd
Copy link

Help me to make my web http://www.security.com.bd >> problem is content wide than screen. my email is securelinebd@gmail.com. I just pest my css.

*{
margin:0px;
font-family:arial;
font-size:13px;
line-height:130%;
}
body{
background:#ccc url(../images/128-129.jpg) fixed;
}

#wrapper{
width:900px;
margin:0px auto 10px;
/* background-color:#ed1f24; */
display:table;
border-radius:8px;
overflow:hidden;
}

#banner{
height:110px;
background-color:#000000;
width:900px;
margin:0 auto;
border-radius:0 8px;
border-bottom:1px red dotted;
border-top:1px red dotted;
background-image:url(../images/hb1.jpg);
background-repeat:no-repeat;
background-position:right top;
}
#banner #logo{
width:;
float:left;
height:95px;
margin-top:5px;
margin-left:15px;
}

#banner h2{
position:relative;
margin-left:340px;
padding-top:20px;
color:#ed2025;
font-size:35px;
text-transform:uppercase;
word-spacing:7px;
letter-spacing:2px;
text-shadow:2px 1px 3px #000;

}
#banner span{
font-size:35px;
color:#fff;

}
#banner #slogan{
color:#fff;
letter-spacing:12px;
margin-left:319px;
font-size:14px;
}
#slide{
height:310px;
background-color:#999;
margin:5px 0 10px 0;
}

#content{
display:table;
background-color:rgba(255,255,255,0.5);
}
#left_c{
float:left;
width:65%;
border-right:5px #fff solid;
box-sizing:border-box;
padding:90px 0;
min-height:600px;
min-width:585px;

}
#left_c div{
padding:7px 50px;
text-align:justify;
background:#fff;
font-size:14px;
line-height:20px;
}
#right_c{
float:right;
width:315px;
padding:90px 0;
}
#right_c h1{
text-align:center;
font-size:20px;
color:white;
font-weight:normal;
background-color: #000;
}
#right_c h1 span{
font-weight:bold;
font-size:18px;
color:white;
}
#right_c .featured_p{
width:260px;
height:200px;
margin:35px 25px;
border-radius:10px;
border:2px solid #BA5757;
padding:1px;
background-color:#fff;
}
#footer{
height:60px;
clear:both;
margin-top:10px;
background-color:#ed1f24;
text-align:center;
color:white;
padding:0 50px;
}
#footer p, #footer span{
line-height:50px;
}
#footer a{
color:#000;
}
/contact.php/
#left_c dt{
margin-left:20px;
}
#left_c dd{
margin-left:40px;
}
#q1_dd,#q2_dd,#q3_dd,#q4_dd{
display:none;
}

#left_c form{
width:490px;
margin:0 auto;
display:block;
}
#left_c input[type="text"],#left_c input[type="email"]{
width:490px;
height:35px;
margin-bottom:5px;
}
#left_c textarea{
width:490px;
height:350px;
margin-bottom:5px;
}
#left_c input[type="submit"]{
width:120px;
height:40px;
float:right;
}

/contact.php/

/gallery/
.gallery_box{
background-color:rgba(255,255,255,0.5);
padding:10px 16px;
}
.gallery_box .vlightbox1_thumb{
width:160px;
height: 120px;
}
/gallery/

@brndto
Copy link

brndto commented Jul 12, 2018

@mixin keyframes( $animationName )
{
    @-webkit-keyframes $animationName {
        @content;
    }
    @-moz-keyframes $animationName {
        @content;
    }
    @-o-keyframes $animationName {
        @content;
    }
    @keyframes $animationName {
        @content;
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment