xsass
A sass library that combines mixins and extends to output minimal css
dependencies
susy
breakpoint
typoRhythm
installing
$ npm install --save xsass
Example
Here we have four elements we want to be flexbox and responsive on large screens.
Scss
.aa { @include flex(column, $medium: row); }
.bb { @include flex(column, $medium: row); }
.cc { @include flex(row, $large: column); }
.dd { @include flex(row, $large: column); }
Even simpler with indented sass
.aa
+flex(column, $medium: row)
.bb
+flex(column, $medium: row)
.cc
+flex(row, $large: column)
.dd
+flex(row, $large: column)
Output
.cc, .dd, .aa, .bb {
display: flex; }
.cc, .dd {
justify-content: row; }
.aa, .bb {
justify-content: column; }
@media (min-width: 64em) {
.aa, .bb {
justify-content: row; } }
@media (min-width: 75em) {
.cc, .dd {
justify-content: column; } }
Use with auto-prefix
.aa, .bb, .cc, .dd {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.cc, .dd {
-webkit-box-pack: row;
-webkit-justify-content: row;
-ms-flex-pack: row;
justify-content: row; }
.aa, .bb {
-webkit-box-pack: column;
-webkit-justify-content: column;
-ms-flex-pack: column;
justify-content: column; }
@media (min-width: 64em) {
.aa, .bb {
-webkit-box-pack: row;
-webkit-justify-content: row;
-ms-flex-pack: row;
justify-content: row; } }
@media (min-width: 75em) {
.cc, .dd {
-webkit-box-pack: column;
-webkit-justify-content: column;
-ms-flex-pack: column;
justify-content: column; } }
Example Configuration File
Base is Optional includes a reset or normalize and some common resets
$template: (
base: reset,
antialiased: true,
box-sizing: true,
img: true,
a: true,
list: true,
form: true
);
Breakpoints
$breakpoints: (
small : 40em,
medium : 64em,
large : 75em,
x-large : 110em
);
Susy Settings
$susy: (
columns: 12,
gutters: 1/4,
gutter-position: inside
);
Colors
$main: rgb(221, 66, 191);
$nd: rgba(104, 207, 115, 0.85);
$colors: (
main: (
x-light : lighten($main, 30%),
light : lighten($main, 10%),
base : $main,
dark : darken($main, 20%),
x-dark : darken($main, 40%)
),
secondary: (
x-light : lighten($nd, 30%),
light : lighten($nd, 10%),
base : $nd,
dark : darken($nd, 20%),
x-dark : darken($nd, 40%)
)
);