xsass

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

/* Although they've different `flex-direction` they share `display: flex` */
.cc, .dd, .aa, .bb {
  display: flex; }

/* cc and dd share `flex-direction: row` */
.cc, .dd {
  justify-content: row; }

/* cc and dd share `flex-direction: column` */
.aa, .bb {
  justify-content: column; }

/* On a Medium Screen aa and bb share `flex-direction: row` */
@media (min-width: 64em) {
  .aa, .bb {
    justify-content: row; } }

/* On a Large Screen cc and dd share `flex-direction: column` */
@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%)
  )
);