Skip to content

Instantly share code, notes, and snippets.

@drewbkoch
Created April 8, 2014 20:41
Show Gist options
  • Save drewbkoch/10188457 to your computer and use it in GitHub Desktop.
Save drewbkoch/10188457 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Bourbon (v)
// ----
@import "bourbon/bourbon";
.block {
width: calc(50% - #{em(200)});
}
@mixin calc($attr, $value, $base: 100%, $operator: '-', $tb-property: null) {
@if $tb-property == 0 {
#{$attr}: 20px calc(#{$base} #{$operator} #{$value});
} @else if $tb-property != 0 {
#{$attr}: calc(#{$base} #{$operator} #{$value});
}
}
.block {
@include calc(width, em(50), '50%', '+', $tb-property: 0);
}
.brick {
@include calc(margin, em(10), $operator: '*')
}
@mixin van {
color: black;
windows: tinted;
lincense: Washington;
&.seats {
seats: 10;
color: black;
@content;
}
}
.my-van {
@include van;
}
.your-van {
@include van {
heated: yes;
fabric: cloth;
electric: no;
}
}
.block {
width: calc(50% - 12.5em);
}
.block {
width: 20px calc(50% + 3.125em);
}
.brick {
margin: calc(100% * 0.625em);
}
.my-van {
color: black;
windows: tinted;
lincense: Washington;
}
.my-van.seats {
seats: 10;
color: black;
}
.your-van {
color: black;
windows: tinted;
lincense: Washington;
}
.your-van.seats {
seats: 10;
color: black;
heated: yes;
fabric: cloth;
electric: no;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment