Skip to content

Instantly share code, notes, and snippets.

@lorefnon
Last active October 24, 2015 19:30
Show Gist options
  • Save lorefnon/ddb1880e64d8e1071bb0 to your computer and use it in GitHub Desktop.
Save lorefnon/ddb1880e64d8e1071bb0 to your computer and use it in GitHub Desktop.
One SCSS file to rule them all
// So you have co-workers who love raving about buzzwords like Semantic styles, unobstructive css, BEM etc
// which never made sense?
//
// Drop this into your project, grab some popcorn and hit commit.
//
// Now the screams begin ...
@each $dim in 5, 10, 20 {
@each $attr-key, $attr in (m: margin, p: padding) {
.u-#{$attr-key}#{$dim} { #{$attr}: #{$dim}px; }
@each $dir-key, $dir in (t: top, r: right, b: bottom, l:left) {
.u-#{$attr-key}#{$dir-key}#{$dim}{
#{$attr}-#{$dir}: #{$dim}px;
}
}
}
}
@each $dir-key, $dir in (l: left, r: right, c: center) {
.u-t#{$dir-key} { text-align: $dir }
}
$dirs: (top, right, left, bottom);
@each $pack-dir in $dirs {
.u-pack-#{$pack-dir} {
position: absolute;
@each $stick-dir in $dirs {
@if $pack-dir != $stick-dir {
#{$stick-dir}: 0;
}
}
}
.u-pack-all {
position: absolute;
@each $stick-dir in $dirs { #{$stick-dir}: 0; }
}
}
@for $fs from 1 through 6 {
.u-fs#{$fs} { font-size: #{$fs}em; }
.u-fs#{$fs}-5 { font-size: #{$fs}.5em; }
}
.u-m5 {
margin: 5px;
}
.u-mt5 {
margin-top: 5px;
}
.u-mr5 {
margin-right: 5px;
}
.u-mb5 {
margin-bottom: 5px;
}
.u-ml5 {
margin-left: 5px;
}
.u-p5 {
padding: 5px;
}
.u-pt5 {
padding-top: 5px;
}
.u-pr5 {
padding-right: 5px;
}
.u-pb5 {
padding-bottom: 5px;
}
.u-pl5 {
padding-left: 5px;
}
.u-m10 {
margin: 10px;
}
.u-mt10 {
margin-top: 10px;
}
.u-mr10 {
margin-right: 10px;
}
.u-mb10 {
margin-bottom: 10px;
}
.u-ml10 {
margin-left: 10px;
}
.u-p10 {
padding: 10px;
}
.u-pt10 {
padding-top: 10px;
}
.u-pr10 {
padding-right: 10px;
}
.u-pb10 {
padding-bottom: 10px;
}
.u-pl10 {
padding-left: 10px;
}
.u-m20 {
margin: 20px;
}
.u-mt20 {
margin-top: 20px;
}
.u-mr20 {
margin-right: 20px;
}
.u-mb20 {
margin-bottom: 20px;
}
.u-ml20 {
margin-left: 20px;
}
.u-p20 {
padding: 20px;
}
.u-pt20 {
padding-top: 20px;
}
.u-pr20 {
padding-right: 20px;
}
.u-pb20 {
padding-bottom: 20px;
}
.u-pl20 {
padding-left: 20px;
}
.u-tl {
text-align: left;
}
.u-tr {
text-align: right;
}
.u-tc {
text-align: center;
}
.u-pack-top {
position: absolute;
right: 0;
left: 0;
bottom: 0;
}
.u-pack-all {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.u-pack-right {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.u-pack-all {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.u-pack-left {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.u-pack-all {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.u-pack-bottom {
position: absolute;
top: 0;
right: 0;
left: 0;
}
.u-pack-all {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.u-fs1 {
font-size: 1em;
}
.u-fs1-5 {
font-size: 1.5em;
}
.u-fs2 {
font-size: 2em;
}
.u-fs2-5 {
font-size: 2.5em;
}
.u-fs3 {
font-size: 3em;
}
.u-fs3-5 {
font-size: 3.5em;
}
.u-fs4 {
font-size: 4em;
}
.u-fs4-5 {
font-size: 4.5em;
}
.u-fs5 {
font-size: 5em;
}
.u-fs5-5 {
font-size: 5.5em;
}
.u-fs6 {
font-size: 6em;
}
.u-fs6-5 {
font-size: 6.5em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment