anasnakawa/bi-app-sass

writing bi-directional stylesheets in sass

Bi App Sass

bi-app lets you write your stylesheets once, and have them compiled into 2 different stylesheets one for left-to-right layout, and the other for right-to-left layouts

Why

usually when writing stylesheets for bi-directional sites/apps, both ltr & rtl stylesheets mostly will look the same, except for direction related properties (float, text-align, padding, margin ..etc ), so when you write a float: left in some ltr stylesheet, you'll have to write it again as float: right for the rtl one

when using bi-app-sass , all you have to do is to write your stylesheets once using a predefined mixins for those direction related properties, and once you compile your stylesheets, you'll have a ready two stylesheets for your bi-directional app

How to use it

create three Sass files

app-ltr.scss    // ltr interface to be compiled
app-rtl.scss    // rtl interface
_app.scss       // private file where you will write your styles (won't be compiled)

in the app-ltr.scss only include the following

@import 'bi-app-ltr';
@import 'app';

same for app-rtl.scss

@import 'bi-app-rtl';
@import 'app';

now you can write your styles in _app.scss, using bi-app mixins, as you were styling for only ltr layouts, and the rtl styles will be compiled automatically!

.foo {
  display: block;
  @include float(left);
  @include border-left(1px solid white);
  ...
}

the result will be ..

in app-ltr.css

.foo {
  display: block;
  float: left;
  border-left: 1px solid white;
  ...
}

in app-rtl.css

.foo {
  display: block;
  float: right;
  border-right: 1px solid white;
  ...
}

Installing via npm

npm install bi-app-sass

Installing via Bower

bower install bi-app-sass

Installing via Yeoman

yeoman install bi-app-sass

Reference

a list of available mixins for CSS properties

// padding
padding-left(distance)
padding-right(distance)
padding(top, right, bottom, left)

// margin
margin-left(distance)
margin-right(distance)
margin(top, right, bottom, left)

// float
float(direction)			// left || right || none

// text align
text-align(direction)		// left || right || center

// clear
clear(direction)			// left || right || both

// left / right
left(distance)
right(distance)

// border
border-left(border-style)
border-right(border-style)

// border width
border-left-width(width)
border-right-width(width)
border-width(top, right, bottom, left)

// border style
border-left-style(style)
border-right-style(style)
border-style(top, right, bottom, left)

// border color
border-left-color(color)
border-right-color(color)
border-color(top, right, bottom, left)

// border radius
border-top-left-radius(radius)
border-top-right-radius(radius)
border-bottom-left-radius(radius)
border-bottom-right-radius(radius)
border-left-radius(radius)
border-right-radius(radius)
border-top-radius(radius)
border-bottom-radius(radius)
border-radius(topLeft, topRight, bottomRight, bottomLeft)

// ltr / rtl contents
rtl
ltr

Handling Special Cases

whenever you face a special case, the rtl & ltr mixins will give you hand :)

.some-class {
    @include rtl {
      // what you write here, will appear only in rtl stylesheets
      background-image: url('rtl/some-image.jpg');
      background-position: -10px 30px;
    }

    @include ltr {
      background-image: url('ltr/some-image.jpg');
      background-position: 100% 50%;
    }
}

Credits

created by Anas Nakawa github, twitter,
inspired by Victor Zamfir github, Victor Zamfir

License

Released under the MIT License