Geek Answers Handbook

Right to left support (RTL) in the SASS project

I am wondering if it is possible to create a mixin that treats several arguments as properties that need to be converted to rtl. I want to do something like

.css-selector { width: 300px; height: 200px; @include rtl { padding: 10px 5px 3px 4px; margin: 3px 8px 2px 5px; } }

with the mixture:

 $rtl = false !default; @mixin rtl() { @if $rtl { dir: rtl; @each $property in @content { //check property if it padding or margin or something else rtl-related... if hit use rtl mixin } } @else { @content; } }

I think I should parse @content, but it doesn't work (invalid CSS after "... h $ property in": the expected expression (e.g. 1px, bold) was "@content {).

Now I am processing rtl with two vars:

  $dir: left !default; $opdir: right !default;

which I change when it is rtl. I use it in my sass files, for example

 margin-#{$dir}: 15px;

But I do not think that this solution is quite flexible. And I also don't want to include a separate mixin for the css property.

Does anyone have a better idea or solution? Any feedback is appreciated.

+6
source share
4 answers

not the same approach, but bi-app-sass will solve the rtl problem and it will generate 2 different stylesheets for you

after creating the necessary files (explained in the link above) all you need to do is call the predefined mixin for the left / right properties (float, border, margin, padding, text-align ...)

  .foo { @include float(left); @include border-left(1px solid white); @include text-align(right); }

there is a port of this project for a smaller language

Update

there are conditional mixes rtl and ltr in bi-app-sass that are useful for handling special cases, see the following example

 .something { @include ltr { // anything here will appear in the ltr stylesheet only background-image: url( 'app-ltr.jpg' ); } @include rtl { // for rtl sheet only background-image: url( 'app-rtl.jpg' ); margin-top: -2px; } }

Please note that this feature is not supported in bi-app-less

+3
source

Something like @mixin with additional parameters to be used with any CSS selector.

 @mixin rtl ($padding:"", $margin:"", $width:"", $height:""){ padding:$padding; margin:$margin; width:$width; height:$height; direction:rtl; }

Now let's say that you have a CSS selector called " mySelector " and you want to change the size and width of the pad ...

 .mySelector { @include rtl(5px, "", 50%); font-size:1em; color:#333; }
0
source

The following SCSS import adds some useful variables, functions, and mixins.

View on github

More details

 // Override default value for $dir in directional.scss $dir: rtl; // Import helpers from directional.scss @import "directional"; // Use the helpers to make CSS for LTR or RTL body { text-align: $left; padding-#{$right}: 1em; margin: dir-values(0 2em 0 1em) if-ltr(!important); }
0
source

I would suggest using a single mixin that can easily handle both cases, including. nested selectors:

_mixin.sass:

 $isRLT: true; @mixin rtl { @if $isRLT { @if & { & { @content; } } @else { @content; } } }

_main.sass:

 .test { float: left; padding: 5px 5px 0px; @include rtl { padding: 5px 0px 0px 5px; } }

core.scss

 // include all your libraries @import '_mixin'; @import '_main';

This will create a file without rtl.

For more information check => https://github.com/davidecantoni/sass-rtl-mixin

0
source

More articles:


All Articles