1.6.2 • Published 9 years ago

xsass v1.6.2

Weekly downloads
2
License
ISC
Repository
github
Last release
9 years ago

xsass

PRs Welcome

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%)
  )
);
1.6.2

9 years ago

1.6.1

9 years ago

1.5.8

9 years ago

1.5.7

10 years ago

1.5.6

10 years ago

1.5.4

10 years ago

1.5.2

10 years ago

1.5.0

10 years ago

1.4.11

10 years ago

1.4.10

10 years ago

1.4.9

10 years ago

1.4.8

10 years ago

1.4.7

10 years ago

1.4.6

10 years ago

1.4.5

10 years ago

1.4.4

10 years ago

1.4.3

10 years ago

1.4.1

10 years ago

1.4.0

10 years ago

1.2.4

10 years ago

1.2.2

10 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.0

10 years ago

1.0.0

10 years ago