Permalink
Browse files

Add bleed mixin (needs docs and tests)

  • Loading branch information...
1 parent 3f77830 commit 33a3417cafa250a6c6cdf425737f2df82328cf3a @mirisuzanne mirisuzanne committed Dec 2, 2012
Showing with 50 additions and 0 deletions.
  1. +18 −0 sass/susy/_functions.scss
  2. +32 −0 sass/susy/_padding.scss
View
@@ -12,6 +12,24 @@ $browser-default-font-size-pt : 12pt;
$rem-with-px-fallback : true !default;
// ---------------------------------------------------------------------------
+// Sass list Functions
+
+// Return a list with specific items removed
+//
+// filter($list, $target)
+// - $list : The list to filter.
+// - $target : An item to be removed from the list.
+@function filter($list, $target) {
+ $clean: compact();
+ @if index($list, $target) {
+ @each $item in $list {
+ $clean: if($item == $target, $clean, append($clean, $item));
+ }
+ } @else { $clean: $list; }
+ @return $clean;
+}
+
+// ---------------------------------------------------------------------------
// Grid Functions
// Returns the full width of a grid based on your grid settings.
View
@@ -58,3 +58,35 @@
@include suffix($suffix, $context, $from, $style);
}
}
+
+// Bleed into colums with margin/padding on any side of an element.
+// $width : The side of the bleed.
+// : Any unit-length will be used directly.
+// : Any unitless number will be used as a column-count.
+// : Use "2 of 6" format to represent 2 cals in a 6-col nested context.
+// $sides : One or more sides to bleed [ top | right | bottom | left | all ].
+// $style : The container style to use.
+@mixin bleed(
+ $width: $grid-padding,
+ $sides: left right,
+ $style: $container-style
+) {
+ @if $border-box-sizing { @include box-sizing(content-box) }
+
+ @if type-of($width) == 'list' {
+ $width: filter($width, of);
+ $width: space(nth($width,1), nth($width,2), $style);
+ } @else if unitless($width) {
+ $width: space($width, $style: $style);
+ }
+
+ @if $sides == 'all' {
+ margin: - $width;
+ padding: $width;
+ } @else {
+ @each $side in $sides {
+ margin-#{$side}: - $width;
+ padding-#{$side}: $width;
+ }
+ }
+}

0 comments on commit 33a3417

Please sign in to comment.