https://github.com/sha-red/compass-mixins/tree/master/lib extended with more sass frameworks and as django app.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

92 lines
3.1 KiB

// ---------------------------------------------------------------------------
// Padding Mixins
// add empty colums as padding before an element.
// $columns : The number of columns to prefix.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin prefix(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
padding-#{$from}: space($columns, $context, $style);
}
// add empty colums as padding after an element.
// $columns : The number of columns to suffix.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin suffix(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
$to : opposite-position($from);
padding-#{$to}: space($columns, $context, $style);
}
// add empty colums as padding before and after an element.
// $columns : The number of columns to pad.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin pad(
$prefix : false,
$suffix : false,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
@if $prefix {
@include prefix($prefix, $context, $from, $style);
}
@if $suffix {
@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: fix-static-misalignment()
) {
@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;
}
}
}