Skip to content

Instantly share code, notes, and snippets.

@geoffyuen
Last active January 25, 2021 04:39
Show Gist options
  • Save geoffyuen/87dfd8e76312b616a9f1ba0ce4e7aee8 to your computer and use it in GitHub Desktop.
Save geoffyuen/87dfd8e76312b616a9f1ba0ce4e7aee8 to your computer and use it in GitHub Desktop.
Tailwind/Tachyons genrerator in pure Sass.
@function cfg($key, $map: $cfg) {
@return map-get($map, $key);
}
$cfg: (
whitespace: (
values: (
0: 0,
1: 1px,
2: 2px,
3: 4px,
),
rules: (
pv: (ruleset: (padding-top, padding-bottom,),),
ph: (ruleset: (padding-left, padding-right,),),
pt: (ruleset: (padding-top,)),
pb: (ruleset: (padding-bottom,)),
pl: (ruleset: (padding-left,)),
pr: (ruleset: (padding-right,)),
mv: (ruleset: (margin-top, margin-bottom,),),
mh: (ruleset: (margin-left, margin-right,),),
mt: (ruleset: (margin-top,)),
mb: (ruleset: (margin-bottom,)),
ml: (ruleset: (margin-left,)),
mr: (ruleset: (margin-right,)),
)
),
maxwidths: (
values: (
0: 0,
1: 320px,
2: 480px,
3: 768px,
4: 960px,
5: 1200px,
),
rules: (
mw: (ruleset: (max-width,),),
)
),
widths: (
values: (
10: 10%,
20: 20%,
25: 25%,
30: 30%,
third: calc(100%/3),
40: 40%,
50: 50%,
60: 60%,
two-thirds: calc(200%/3),
70: 70%,
75: 75%,
80: 80%,
90: 90%,
100: 100%,
),
rules: (
mw-: (ruleset: (max-width,),),
)
),
);
@each $temp, $tach in $cfg {
@each $class1, $rules in cfg(rules, $tach) {
@each $class2, $val in cfg(values, $tach) {
.#{$class1}#{$class2} {
@each $static, $prop in $rules {
@if type-of($prop) == list {
@each $rule in $prop {
#{$rule}: $val;
}
}
@if type-of($prop) == string {
#{$static}: #{$prop};
}
}
}
}
}
}
.pv0 {
padding-top: 0;
padding-bottom: 0;
}
.pv1 {
padding-top: 1px;
padding-bottom: 1px;
}
.pv2 {
padding-top: 2px;
padding-bottom: 2px;
}
.pv3 {
padding-top: 4px;
padding-bottom: 4px;
}
.ph0 {
padding-left: 0;
padding-right: 0;
}
.ph1 {
padding-left: 1px;
padding-right: 1px;
}
.ph2 {
padding-left: 2px;
padding-right: 2px;
}
.ph3 {
padding-left: 4px;
padding-right: 4px;
}
.pt0 {
padding-top: 0;
}
.pt1 {
padding-top: 1px;
}
.pt2 {
padding-top: 2px;
}
.pt3 {
padding-top: 4px;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 1px;
}
.pb2 {
padding-bottom: 2px;
}
.pb3 {
padding-bottom: 4px;
}
.pl0 {
padding-left: 0;
}
.pl1 {
padding-left: 1px;
}
.pl2 {
padding-left: 2px;
}
.pl3 {
padding-left: 4px;
}
.pr0 {
padding-right: 0;
}
.pr1 {
padding-right: 1px;
}
.pr2 {
padding-right: 2px;
}
.pr3 {
padding-right: 4px;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv1 {
margin-top: 1px;
margin-bottom: 1px;
}
.mv2 {
margin-top: 2px;
margin-bottom: 2px;
}
.mv3 {
margin-top: 4px;
margin-bottom: 4px;
}
.mh0 {
margin-left: 0;
margin-right: 0;
}
.mh1 {
margin-left: 1px;
margin-right: 1px;
}
.mh2 {
margin-left: 2px;
margin-right: 2px;
}
.mh3 {
margin-left: 4px;
margin-right: 4px;
}
.mt0 {
margin-top: 0;
}
.mt1 {
margin-top: 1px;
}
.mt2 {
margin-top: 2px;
}
.mt3 {
margin-top: 4px;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 1px;
}
.mb2 {
margin-bottom: 2px;
}
.mb3 {
margin-bottom: 4px;
}
.ml0 {
margin-left: 0;
}
.ml1 {
margin-left: 1px;
}
.ml2 {
margin-left: 2px;
}
.ml3 {
margin-left: 4px;
}
.mr0 {
margin-right: 0;
}
.mr1 {
margin-right: 1px;
}
.mr2 {
margin-right: 2px;
}
.mr3 {
margin-right: 4px;
}
.mw0 {
max-width: 0;
}
.mw1 {
max-width: 320px;
}
.mw2 {
max-width: 480px;
}
.mw3 {
max-width: 768px;
}
.mw4 {
max-width: 960px;
}
.mw5 {
max-width: 1200px;
}
.mw-10 {
max-width: 10%;
}
.mw-20 {
max-width: 20%;
}
.mw-25 {
max-width: 25%;
}
.mw-30 {
max-width: 30%;
}
.mw-third {
max-width: calc(100%/3);
}
.mw-40 {
max-width: 40%;
}
.mw-50 {
max-width: 50%;
}
.mw-60 {
max-width: 60%;
}
.mw-two-thirds {
max-width: calc(200%/3);
}
.mw-70 {
max-width: 70%;
}
.mw-75 {
max-width: 75%;
}
.mw-80 {
max-width: 80%;
}
.mw-90 {
max-width: 90%;
}
.mw-100 {
max-width: 100%;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment