Skip to content

Instantly share code, notes, and snippets.

@csswizardry
Created October 29, 2015 13:51
Show Gist options
  • Save csswizardry/b38d98f9bd48bc72654f to your computer and use it in GitHub Desktop.
Save csswizardry/b38d98f9bd48bc72654f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<a href="#0" class="c-btn">Button</a>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$unit: 18px;
$sizes: (
null: $unit,
-small: $unit /2,
-large: $unit * 2,
);
$properties: (
margin,
padding,
);
$directions: (
null,
-top,
-right,
-bottom,
-left,
);
@each $size, $value in $sizes {
@each $property in $properties {
@each $direction in $directions {
.u-#{$property}#{$direction}#{$size} {
#{$property}#{$direction}: $value !important;
}
}
}
}
.u-margin {
margin: 18px !important;
}
.u-margin-top {
margin-top: 18px !important;
}
.u-margin-right {
margin-right: 18px !important;
}
.u-margin-bottom {
margin-bottom: 18px !important;
}
.u-margin-left {
margin-left: 18px !important;
}
.u-padding {
padding: 18px !important;
}
.u-padding-top {
padding-top: 18px !important;
}
.u-padding-right {
padding-right: 18px !important;
}
.u-padding-bottom {
padding-bottom: 18px !important;
}
.u-padding-left {
padding-left: 18px !important;
}
.u-margin-small {
margin: 9px !important;
}
.u-margin-top-small {
margin-top: 9px !important;
}
.u-margin-right-small {
margin-right: 9px !important;
}
.u-margin-bottom-small {
margin-bottom: 9px !important;
}
.u-margin-left-small {
margin-left: 9px !important;
}
.u-padding-small {
padding: 9px !important;
}
.u-padding-top-small {
padding-top: 9px !important;
}
.u-padding-right-small {
padding-right: 9px !important;
}
.u-padding-bottom-small {
padding-bottom: 9px !important;
}
.u-padding-left-small {
padding-left: 9px !important;
}
.u-margin-large {
margin: 36px !important;
}
.u-margin-top-large {
margin-top: 36px !important;
}
.u-margin-right-large {
margin-right: 36px !important;
}
.u-margin-bottom-large {
margin-bottom: 36px !important;
}
.u-margin-left-large {
margin-left: 36px !important;
}
.u-padding-large {
padding: 36px !important;
}
.u-padding-top-large {
padding-top: 36px !important;
}
.u-padding-right-large {
padding-right: 36px !important;
}
.u-padding-bottom-large {
padding-bottom: 36px !important;
}
.u-padding-left-large {
padding-left: 36px !important;
}
<a href="#0" class="c-btn">Button</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment