lass-flexbox

Flexbox for Lass. Ported from this library by Brian Franco.

Overview

Lass is a library for generating CSS from a Lisp-based DSL.

Flexbox is a layout mode that greatly simplifies the task of arranging things in CSS.

The problem is it's not portable without vendor prefixes because it's experimental.

"But that's fine", you say, foolishly. "I'll just add a couple of webkits and mozzes". Oh, gentle reader, what I would give to relive those days of innonence and wild abandon.

This is the portable version of display:flex and flex-direction: row:

display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

See what I mean?

Usage

Just load the library.

Example

This:

(.fun
  :flexbox
  :flex-direction "row"
  :justify-content "space-around"
  :align-items "center")

Gets compiled to this:

.fun {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

License

Copyright (c) 2016 Fernando Borretti

Licensed under the MIT License.