Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$spacing-unit: 24px;
$spacing-unit-tiny: round(0.25 * $spacing-unit);
$spacing-unit-small: round(0.5 * $spacing-unit);
$spacing-unit-large: round(2 * $spacing-unit);
$spacing-unit-huge: round(4 * $spacing-unit);
@mixin sizes($properties...) {
&--tiny {
@each $property in $properties {
#{$property}: $spacing-unit-tiny;
}
}
&--small {
@each $property in $properties {
#{$property}: $spacing-unit-small;
}
}
&--large {
@each $property in $properties {
#{$property}: $spacing-unit-large;
}
}
&--huge {
@each $property in $properties {
#{$property}: $spacing-unit-huge;
}
}
}
.btn {
display: block;
color: white;
background-color: green;
padding-top: $spacing-unit-small;
padding-bottom: $spacing-unit-small;
@include sizes(padding-right, padding-left);
}
.box {
display: block;
padding: $spacing-unit;
@include sizes(padding);
}
.page-title {
line-height: $spacing-unit;
@include sizes(line-height);
}
.btn {
display: block;
color: white;
background-color: green;
padding-top: 12px;
padding-bottom: 12px;
}
.btn--tiny {
padding-right: 6px;
padding-left: 6px;
}
.btn--small {
padding-right: 12px;
padding-left: 12px;
}
.btn--large {
padding-right: 48px;
padding-left: 48px;
}
.btn--huge {
padding-right: 96px;
padding-left: 96px;
}
.box {
display: block;
padding: 24px;
}
.box--tiny {
padding: 6px;
}
.box--small {
padding: 12px;
}
.box--large {
padding: 48px;
}
.box--huge {
padding: 96px;
}
.page-title {
line-height: 24px;
}
.page-title--tiny {
line-height: 6px;
}
.page-title--small {
line-height: 12px;
}
.page-title--large {
line-height: 48px;
}
.page-title--huge {
line-height: 96px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment