Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demonstrates passing a variable into a mixin. Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----
@mixin quotenote($bgimage: none) {
width: 80%;
background-color: #333;
padding: 1%;
margin-bottom: 1.5em;
@if $bgimage != none {
background: image-url("#{$bgimage}") #333 no-repeat 5px 8px;
}
}
blockquote { @include quotenote; }
.caution { @include quotenote($bgimage: "caution.png"); }
.note { @include quotenote($bgimage: "note.png"); }
blockquote {
width: 80%;
background-color: #333;
padding: 1%;
margin-bottom: 1.5em;
}
.caution {
width: 80%;
background-color: #333;
padding: 1%;
margin-bottom: 1.5em;
background: url('/images/caution.png') #333333 no-repeat 5px 8px;
}
.note {
width: 80%;
background-color: #333;
padding: 1%;
margin-bottom: 1.5em;
background: url('/images/note.png') #333333 no-repeat 5px 8px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.