@sass-collective/direction

Introduction

Manage content direction for languages right-to-left.

Install

npm install @sass-collective/direction --save

Usage

Mixin

styles($direction: right, $root-selector: null);

Options

Names	Default	Values
$direction	right	left or right
$root-selector	null	Class, ID or HTML element.

Module System

@use "@sass-collective/direction";

p {
    margin-left: 20px;
    margin-right: 0;

    // RTL
    @include direction.styles {
        margin-left: 0;
        margin-right: 20px;
    }

    // LTR
    @include direction.styles(left) {
        margin-left: 0;
        margin-right: 20px;
    }

    // Root Selector
    @include direction.styles($root-selector: div) {
        margin-left: 0;
        margin-right: 20px;
    }
}

Legacy @import

@import "@sass-collective/direction";

p {
    margin-left: 20px;
    margin-right: 0;

    // RTL
    @include sass-direction-styles {
        margin-left: 0;
        margin-right: 20px;
    }

    // LTR
    @include sass-direction-styles(left) {
        margin-left: 0;
        margin-right: 20px;
    }

    // Root Selector
    @include sass-direction-styles($root-selector: div) {
        margin-left: 0;
        margin-right: 20px;
    }
}

CSS

p {
    margin-left: 20px;
    margin-right: 0;
}

/** RTL **/
[dir="rtl"] p {
    margin-left: 0;
    margin-right: 20px;
}

/** LTR **/
[dir="ltr"] p {
    margin-left: 0;
    margin-right: 20px;
}

/** Root Selector **/
[dir="rtl"] div p {
    margin-left: 0;
    margin-right: 20px;
}