Skip to content

Instantly share code, notes, and snippets.

@pixelwhip
Last active April 8, 2020 17:37
Show Gist options
  • Save pixelwhip/8428447 to your computer and use it in GitHub Desktop.
Save pixelwhip/8428447 to your computer and use it in GitHub Desktop.
Magic Padding Sass Mixin. Adds padding to all four sides of an element. Replacing bottom padding with an :after psuedo element with top margin, giving the illusion of the bottom padding collapsing with the bottom margin of the last child within the element. @params $values Same as CSS shorthand for padding Example: 10px or 1em 10px or 10px 20px …
//
// @file
// Magic Padding mixins.
//
// Replaces bottom padding with an :after psuedo element with top margin, giving
// the illusion of the bottom padding collapsing with the bottom margin of the
// last child within the element.
//
// @param $value
// Any CSS measurement.
@mixin magic-padding-bottom($value) {
&:after {
content: '';
display: block;
margin-top: $value;
height: .001em;
}
}
//
// Adds padding to all four sides of an element. Replacing bottom padding with
// an :after psuedo element with top margin.
//
// @param $values
// Same as CSS shorthand padding.
//
@mixin magic-padding($values) {
$length: length($values);
$top: nth($values, 1);
$right: $top;
$bottom: $top;
$left: $top;
@if $length == 2 {
$right: nth($values, 2);
$left: $right;
}
@else if $length == 3 {
$right: nth($values, 2);
$bottom: nth($values, 3);
$left: $right;
}
@else if $length >= 4 {
$right: nth($values, 2);
$bottom: nth($values, 3);
$left: nth($values, 4);
}
padding: $top $right 0 $left;
@include magic-padding-bottom($bottom);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment