Direction-mixins is a collection of mixins and functions you can use to have two separate css files but only have to write (and thus maintain) one file. Instead of using the traditional declarations you can use mixins that will transform your values based on a variable.
Download them or add them to your project with npm:
npm install --save direction-mixins
Create a partial which will contain all your styling and import the mixins as you were creating a stylesheet for one direction (e.g _screen.scss
).
Create two files (e.g. screen-ltr.scss
and screen-rtl.scss
and set the direction variable to the correct direction. Your file will look something like this:
$direction: rtl;
@import "screen";
Start using mixins and functions for your declarations that depend on horizontal position (e.g. margins, paddings, left and right positions. Don't forget to add the direction variable to body.
body {
direction: $direction;
}
This package contains a set of mixins that can be used for both short-hand and single-hand properties. Let's say you want to have a margin on the left of 20 pixels:
@include margin(0 0 0 20px);
This will be transformed to:
margin: 0 0 0 20px; /* LTR direction */
And for the RTL version of your styling:
margin: 0 20px 0 0; /* RTL direction */
Or you could use the margin-right mixin
@include margin-right(20px);
This will change the right margin to a left one on RTL
margin-right: 20px; /* LTR direction */
margin-left: 20px; /* RTL direction */
In order to add direction-aware transform you can use functions:
transform: translate-xy(-50%, -50%);
transform: translate-x(-50%);
This will change the x-offset to a positive number for RTL
transform: translate(50%, -50%);
transform: translateX(50%);
If you need to flip an element (e.g. an icon used in breadcrumbs) you can add the flip function to the transform properties:
transform: flip();
This will use transform: scaleX(-1)
in order to flip the element on the x-axis.
Please note that this might cause conflicts when using scale within the same declaration.
- margin
- margin-left
- margin-right
- padding
- padding-left
- padding-right
- right
- left
- border-color
- border-width
- border-style
- box-shadow
- text-align
- text-shadow
- clear
- float
- flip
- animation-direction-normal
- animation-direction-reverse
- translate-x
- translate-xy
- translate-3d
- rotate-me
- transform-origin