SASSime
Tiny Sass Framework
Texts
%txt-$var
in $text
text-align @extend %txt-left;
//text-align: left;
@extend %txt-right;
//text-align: right;
@extend %txt-center_tablet;
//@media screen and (min-width: 768px) { text-align: center; }
%decor-$var
in $text-decor
text-decoration @extend %decor-none;
//text-decoration: none;
@extend %decor-underline;
//text-decoration: underline;
@extend %txt-line-through_tablet;
//@media screen and (min-width: 768px) { text-decoration: line-through; }
$var
in $text-transform
text-transform @extend %capital;
//text-transform: capitalize;
@extend %upper;
//text-transform: uppercase;
@extend %lower_tablet;
//@media screen and (min-width: 768px) { text-transform: lowercase; }
%ff-$var
in $fonts
font-family @extend %ff-main;
//font-family: 'Arial';
@extend %ff-header_tablet;
//@media screen and (min-width: 768px) { font-family: 'Georgia'; }
%fs-$var
in $fontsize
font-size @extend %fs-12;
//font-size: 0.75rem;
@extend %fs-16_tablet;
//@media screen and (min-width: 768px) { font-size: 1rem; }
%lh-$var
in $fontsize
line-height @extend %lh-12;
//line-height: 0.75rem;
@extend %lh-16_tablet;
//@media screen and (min-width: 768px) { line-height: 1rem; }
Visuals
$var
in $display
display @extend %hide;
//display: none;
@extend %flex;
//display: flex;
@extend %block_tablet;
//@media screen and (min-width: 768px) { display: block; }
$var
in $position
position @extend %absolute;
//position: absolute;
@extend %static;
//position: static;
@extend %relative_tablet;
//@media screen and (min-width: 768px) { position: relative; }
fl-$var
in $float
float @extend %fl-left;
//float: left;
@extend %fl-right;
//float: right;
@extend %fl-left_tablet;
//@media screen and (min-width: 768px) { float: left; }
vs-$var
in $visibility
visibility @extend %vs-hidden;
//visibility: hidden;
@extend %vs-visible;
//visibility: visible;
@extend %vs-collapse_tablet;
//@media screen and (min-width: 768px) { visibility: collapse; }
Colours
%color-$var
in $colors
color @extend %color-white;
//color: #fff;
@extend %color-grey7;
//color: #777;
@extend %color-black_tablet;
//@media screen and (min-width: 768px) { color: #000; }
%bg-$var
in $colors
background-color @extend %bg-white;
//background-color: #fff;
@extend %bg-grey7;
//background-color: #777;
@extend %bg-black_tablet;
//@media screen and (min-width: 768px) { background-color: #000; }
%border-$var
in $colors
border @extend %border-white;
//border: 1px solid #fff;
@extend %border-grey7;
//border: 1px solid #777;
@extend %border-black_tablet;
//@media screen and (min-width: 768px) { border: 1px solid #000; }
%border-%pos-$var
in $colors
border top, left, right, bottom @extend %border-t-white;
//border-top: 1px solid #fff;
@extend %border-r-grey7;
//border-right: 1px solid #777;
@extend %border-b-black_tablet;
//@media screen and (min-width: 768px) { border-bottom: 1px solid #000; }