Skip to content

Instantly share code, notes, and snippets.

@clintfisher
Created September 17, 2014 17:33
Show Gist options
  • Save clintfisher/7067feac1f25ec5c33ed to your computer and use it in GitHub Desktop.
Save clintfisher/7067feac1f25ec5c33ed to your computer and use it in GitHub Desktop.
span mixin using placeholder
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$grid-unit: 45px;
$grid-unit-mini: 15px;
$grid-unit-micro: 7px;
@mixin span($standard: 0, $mini: 0, $micro: 0, $extend: true) {
$grid-units: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro));
@if $extend {
@if $standard == 11 {
@extend %span-11;
}
@if $standard == 12 {
@extend %span-12;
}
}
@else {
width: $grid-units;
}
}
%span-11 {
@include span(11, 0, 0, false); // 495
}
%span-12 {
@include span(12, 0, 0, false); // 540
}
.media {
@include span(11);
}
.media-photo {
@include span(12);
}
.media-video {
@include span(11);
}
.media-slideshow {
@include span(13, 0, 0, false);
}
.media, .media-video {
width: 495px;
}
.media-photo {
width: 540px;
}
.media-slideshow {
width: 585px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment