Skip to content

Instantly share code, notes, and snippets.



Created May 26, 2015
What would you like to do?
SCSS spacing utility
$prefix: space;
// All available sizs
$sizes: (
"n": 0,
"xs": 5px,
"s": 10px,
"m": 15px,
"l": 20px,
"xl": 25px
// Types of spacing
$types: (
// Location of spacing
$locations: (
"A": "*",
"T": "top",
"R": "right",
"B": "bottom",
"L": "left"
@function getSelectorName($type, $locationKey, $key) {
@return #{$prefix}-#{$type}-#{$locationKey}-#{$key};
@function getPropertyName($type, $locationPosition) {
@return #{$type}-#{$locationPosition};
// Loop through all the types
@each $type in $types {
// Loop through all the sizes getting the key and the size
// This is then added onto the type of spacing we are looping through
@each $sizeObject in $sizes {
$key: nth($sizeObject, 1);
$size: nth($sizeObject, 2);
// Loop through all the location types
// This creates the spacing at the specific location
@each $location in $locations {
$locationKey: nth($location, 1);
// To save having an if and then two different selector creators, we create a list
// The list is then looped through for both 'A' and any single location selector
$locationPositions: (
nth($location, 2)
// If this is the all selector we need to loop round all locations apart from all
// This allows us to create a list which contains all the location definitions
@if nth($locationPositions, 1) == "*" {
$locationPositions: ();
@each $allLocation in $locations {
$loc: nth($allLocation, 2);
@if $loc != "*" {
$locationPositions: append($locationPositions, $loc);
.#{getSelectorName($type, $locationKey, $key)} {
// Loop through each of the locations
@each $locationPosition in $locationPositions {
#{getPropertyName($type, $locationPosition)}: $size;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment