Paddings
Add paddings defined in space units to your elements
@padding
Mixin: @include padding($top, $right, $bottom, $left);
- $top, $right, $bottom, $left value defined in space-units
- If you only fill in the $top value the other values ($right, $bottom, $left) will take over this value. Similar to vanille CSS
Multiple input methods
@include padding($space-units);
@include padding($vertical, $horizontal);
@include padding($top, $horizontal, $bottom);
@include padding($top, $right, $bottom, $left);
Example
1 space-unit padding top and bottom, 2 space units left and right
Padding Example element
.example-element {
@include padding(1,2,1,2);
//or shorthand
@include padding(1,2);
}
@padding-top
- Mixin:
@include padding-top($space-units)
Example
1 space-unit padding on top
Padding Example element
.example-element {
@include padding-top(1);
}
@padding-right
- Mixin:
@include padding-right($space-units)
Example
1 space-unit padding on right
Padding Example element
.example-element {
@include padding-right(1);
}
@padding-bottom
- Mixin:
@include padding-bottom($space-units)
Example
1 space-unit padding on bottom
Padding Example element
.example-element {
@include padding-bottom(1);
}
@padding-left
- Mixin:
@include padding-left($space-units)
Example
1 space-unit padding on left
Padding Example element
.example-element {
@include padding-left(1);
}
@padding-vertical
- Mixin:
@include padding-vertical($top, $bottom)
Multiple input methods
@include padding-vertical($space-units);
@include padding-vertical($top, $bottom);
Example
2 space-unit padding on top and bottom
Padding Example element
.example-element {
@include padding-vertical(2);
}
@padding-horizontal
- Mixin:
@include padding-horizontal($left, $right)
Multiple input methods
@include padding-horizontal($space-units);
@include padding-horizontal($left, $right);
Example
2 space-unit padding on left and right
Padding Example element
.example-element {1
@include padding-horizontal(2);
}
← @Margins @Positions →