1.6.2 • Published 9 years ago
xsass v1.6.2
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%)
)
);
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