Layout utilities for positioning, sizing, spacing, and common layout patterns with support for CSS shorthand values and directional control.
Provides a concise method for setting positioning properties in one statement with support for null values to skip specific edges.
/**
* Sets position and directional properties in one statement
* @param $position - CSS position value (relative, absolute, fixed, static, sticky)
* @param $box-edge-values - List of length values (top, right, bottom, left) supporting CSS shorthand
*/
@mixin position($position, $box-edge-values);Usage Examples:
.relative-element {
@include position(relative, 0 null null 10em);
}
// Result:
// position: relative;
// top: 0;
// left: 10em;
.absolute-element {
@include position(absolute, 0);
}
// Result:
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
.fixed-header {
@include position(fixed, 0 0 null 0);
}
// Result:
// position: fixed;
// top: 0;
// right: 0;
// left: 0;Sets width and height properties in one statement with optional height parameter.
/**
* Sets width and height of an element
* @param $width - Width value (number with unit or string)
* @param $height - Height value (optional, defaults to $width for squares)
*/
@mixin size($width, $height: $width);Usage Examples:
.square {
@include size(2em);
}
// Result:
// width: 2em;
// height: 2em;
.rectangle {
@include size(auto, 10em);
}
// Result:
// width: auto;
// height: 10em;
.responsive-box {
@include size(100%, 50vh);
}Provides clearfix for containing floats using modern ::after pseudo-element technique.
/**
* Provides clearfix for containing floats
*/
@mixin clearfix;Usage Examples:
.container {
@include clearfix;
}
// Result:
// .container::after {
// clear: both;
// content: "";
// display: block;
// }
.float-container {
@include clearfix;
.float-left {
float: left;
}
.float-right {
float: right;
}
}Provides directional margin control with CSS shorthand support and null value skipping.
/**
* Sets margin with directional control
* @param $values - List of margin values supporting CSS shorthand and null values
*/
@mixin margin($values);Usage Examples:
.element {
@include margin(1em null 2em null);
}
// Result:
// margin-top: 1em;
// margin-bottom: 2em;
.symmetric {
@include margin(10px 20px);
}
// Result:
// margin: 10px 20px;
.top-only {
@include margin(15px null null null);
}
// Result:
// margin-top: 15px;Provides directional padding control with CSS shorthand support and null value skipping.
/**
* Sets padding with directional control
* @param $values - List of padding values supporting CSS shorthand and null values
*/
@mixin padding($values);Usage Examples:
.card {
@include padding(20px null 30px null);
}
// Result:
// padding-top: 20px;
// padding-bottom: 30px;
.button {
@include padding(12px 24px);
}
// Result:
// padding: 12px 24px;
.sidebar {
@include padding(null 20px null null);
}
// Result:
// padding-right: 20px;.centered-absolute {
@include position(absolute, 50% null null 50%);
transform: translate(-50%, -50%);
}
.centered-fixed {
@include position(fixed, 0);
@include size(300px, 200px);
margin: auto;
}.responsive-container {
@include size(100%, auto);
@include padding(20px);
@include margin(0 auto);
max-width: 1200px;
}
@media (max-width: 768px) {
.responsive-container {
@include padding(15px);
}
}.grid-container {
@include clearfix;
@include margin(null -10px);
}
.grid-item {
float: left;
@include padding(null 10px);
@include size(50%);
@media (min-width: 768px) {
@include size(33.333%);
}
@media (min-width: 1024px) {
@include size(25%);
}
}The layout mixins include validation for proper values:
// Size validation
.invalid-size {
@include size("invalid");
// Error: "`invalid` is not a valid length for the `$width` argument in the `size` mixin."
}
// Position validation
.invalid-position {
@include position(relative, "invalid-length");
// Error: Values must be valid CSS lengths or null
}