Skip to content

Instantly share code, notes, and snippets.

@lunelson
Created February 14, 2014 11:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lunelson/8999792 to your computer and use it in GitHub Desktop.
Save lunelson/8999792 to your computer and use it in GitHub Desktop.
Demo of new 3.3rc3+ syntax WRT &
// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----
// Configuration variables
// Type name | color scheme
$message-types: (
error : #b94a48,
alert : #c09853,
valid : #468847,
info : #3a87ad
) !default;
// Placeholder for static values
%message {
padding: .5em;
margin: .5em;
border-radius: .15em;
border: 1px solid;
}
// Mixin for dynamic values
// Extending the placeholder
@mixin message($color) {
@extend %message;
color: $color;
background: lighten($color, 38%);
border-color: lighten($color, 20%);
}
// Loop doing all the dumping
@each $type, $color in $message-types {
.message-#{$type} {
@include message($color);
}
}
.message-error, .message-alert, .message-valid, .message-info {
padding: .5em;
margin: .5em;
border-radius: .15em;
border: 1px solid;
}
.message-error {
color: #b94a48;
background: #efd5d4;
border-color: #d59392;
}
.message-alert {
color: #c09853;
background: #f4ede1;
border-color: #dbc59e;
}
.message-valid {
color: #468847;
background: #b6dab7;
border-color: #7aba7b;
}
.message-info {
color: #3a87ad;
background: #bfdcea;
border-color: #7ab5d3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment