Skip to content

Instantly share code, notes, and snippets.

@lucasmotta
Created April 29, 2015 09:26
Show Gist options
  • Save lucasmotta/a46b2b8d512cba5f540e to your computer and use it in GitHub Desktop.
Save lucasmotta/a46b2b8d512cba5f540e to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="box-grey"></div>
<div class="box-rounded"></div>
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
@mixin module($name, $args: ()) {
$i: ".";
@if map-get($args, "silent") { $i: "%"; }
#{$i}#{$name} {
@if map-get($args, "extend") {
@extend .#{map-get($args, "extend")} !optional;
@extend %#{map-get($args, "extend")} !optional;
}
@content;
}
}
// you can also make the abstract one to be silent
// @include module("abstract-box", (silent:true))
@include module("abstract-box") {
width: 50px;
height: 50px;
background: black;
border: 1px solid black;
float: left;
margin-right: 10px;
}
@include module("box-grey", (extend:"abstract-box")) {
background: #CCC;
}
@include module("box-rounded", (extend:"abstract-box")) {
border-radius: 10px;
}
.abstract-box, .box-grey, .box-rounded {
width: 50px;
height: 50px;
background: black;
border: 1px solid black;
float: left;
margin-right: 10px;
}
.box-grey {
background: #CCC;
}
.box-rounded {
border-radius: 10px;
}
<div class="box-grey"></div>
<div class="box-rounded"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment