I have developed an application in angular and is completed which includes approx. 80 modules. Now I need to convert the language to arabic which is RTL. I used SCSS as a CSS library. Is there any easy way to convert my LTR application to RTL because many styles are affecting while using direction=rtl;
I don't want to convert every .scss files in the module.
I'm using css logical properties which should be supported in most of the browsers.
Instead of using margin-left you write margin-inline-start.
The cool part is that if you are using postcss with postcss-preset-env you just can use the new syntax, it will convert it to css that supports by all the browsers based on the dir attribute.
For example:
// some.css
.my-class {
float: inline-start;
margin-inline-start: 10px;
}
it will produce
// some.output.css
[dir="ltr"] .my-class {
float: left
}
[dir="rtl"] .my-class {
float: right
}
[dir="ltr"] .my-class {
margin-left: 10px
}
[dir="rtl"] .my-class {
margin-right: 10px
}
With this output css you can just set the dir attribute of you html element to
rtl, and the browser will use the proper styles.
I'm using this approach in a large code base, it works like a charm.
Another approach is to use rtl-css, which is a tool that creates new css files with flipped directions.
It has several webpack plugins as well, such as rtlcss-webpack-plugin
I have written a crud python tool that can mass-convert all CSS and SCSS files from physical to logical in one go. To use, save that file somewhere, e.g. to-logical.py. Requires python3. Can be used on a single file or whole dirs, and even recursive. Can handle scss expressions. The tool currently handles left, right, top, bottom, margin-*, border-*, padding-*, min-width, max-width, min-height, max-height, text-align.
python3 to-logical.py -r <path-to-dir>
Since I am using SCSS it becomes easy by adding mixins. Below are the mixins for common rtl to ltr properties and I replaced all the border, margin, padding, position and border-radius to generate from this mixins, and it worked fine. Took some long process but perfect.
#mixin rtl-value($property, $ltr-value, $rtl-value, $imp:null) {
#{$property}: $ltr-value;
:host-context([dir=rtl]) & {
#{$property}: $rtl-value;
}
}
#mixin border-radius-gen($tl, $tr, $br, $bl, $imp:null) {
#include rtl-value(border-top-left-radius, $tl, $tr, $imp);
#include rtl-value(border-top-right-radius, $tr, $tl, $imp);
#include rtl-value(border-bottom-right-radius, $br, $bl, $imp);
#include rtl-value(border-bottom-left-radius, $bl, $br, $imp);
}
#mixin margin-gen($top:null, $right:null, $bottom:null, $left:null, $imp:null) {
margin-top: $top $imp;
#include rtl-value(margin-right, $right, $left, $imp);
margin-bottom: $bottom $imp;
#include rtl-value(margin-left, $left, $right, $imp);
}
#mixin padding-gen($top:null, $right:null, $bottom:null, $left:null, $imp:null) {
padding-top: $top $imp;
#include rtl-value(padding-right, $right, $left, $imp);
padding-bottom: $bottom $imp;
#include rtl-value(padding-left, $left, $right, $imp);
}
#mixin border-gen($top:null, $right:null, $bottom:null, $left:null, $imp:null) {
border-top: $top $imp;
#include rtl-value(border-right, $right, $left, $imp);
border-bottom: $bottom $imp;
#include rtl-value(border-left, $left, $right, $imp);
}
#mixin position-gen($top:null, $right:unset, $bottom:null, $left:unset, $imp:null) {
top: $top $imp;
#include rtl-value(right, $right, $left, $imp);
bottom: $bottom $imp;
#include rtl-value(left, $left, $right, $imp);
}
Examples
.style{
#include margin-gen($left: 1px, $right: 1px, $top: 1px, $bottom: 1px, $imp: !important)
#include padding-gen($left: 1px, $right: 1px, $top: 1px, $bottom: 1px, $imp: !important)
#include border-gen($left: 1px solid #ccc, $right: 1px solid #ccc, $top: 1px solid #ccc, $bottom: 1px solid #ccc, $imp: !important)
}
How do I undo the bleed-x() mixin at a smaller breakpoint so box4 (the yellow box) in example 2 goes back in between the purple columns and doesn't wrap to the next line.
.story4 {
#include bleed-x();
#include span(2);
background: yellow;
height: 80px;
#include breakpoint($small) {
#include span(8 last);
}
}
Codepen:
http://codepen.io/meijioro/pen/aBdWyO
Bleed is a combination of negative margins and positive padding. Reset both to 0 to override:
#include breakpoint($small) {
#include span(8 last);
margin: 0;
padding: 0;
}
In general, I try to avoid breakpoint overrides by limiting the original application. Something more like this:
.story4 {
#include span(2);
background: yellow;
height: 80px;
// use your own tools to create max-width breakpoints...
// this limits the bleed, so we don't have to override it later.
#media (max-width: $small) {
#include bleed-x();
}
#include breakpoint($small) {
#include span(8 last);
}
}
I'm using Compass in my CSS and I am trying to specify part of my Sass Css to be run only in Chrome. I tried #include with-prefix but it dosen't seem to work. Is there anyway to run these specific animations only for specific browsers, in this case chrome?
#include with-prefix(-webkit) {
.slideFromRight {
&.ng-enter {
#include animation(slideFromRight ease $animationSpeed);
#include animation-iteration-count(1);
#include transform-origin(0 0);
#include animation-fill-mode(forwards);
}
&.ng-leave {
position: fixed;
#include animation(slideToLeft ease $animationSpeed);
#include animation-iteration-count(1);
#include transform-origin(0 0);
#include animation-fill-mode(forwards);
}
}
}
I am trying to make a nav bar with sass and foundation grid. I have links in the nav bar, but I don't want them to each be #include grid-column(4); instead I would like them to be 3 columns each and then have an empty space of 3 columns on the right end. It would be something similar to this:
(the email tab is currently hovered)
How do I add a space there with the Foundation Grid Sass Mixins.
I fixed the issue by just changing each id to #include grid-column(3); that were previously #include grid-column(4);. I believe this worked because they are in a row and the next column down is larger than 3 so it doesn't automatically jump to the nav bar above, but it lays underneath it.
My mixins are laid out something like this:
header {
#include grid-row;
}
h1 {
#include grid-column(9);
}
.login{
#include grid-column(3);
}
nav {
#include grid-column(12);
}
#games {
#include grid-column(3);
}
#email {
#include grid-column(3);
}
#archive {
#include grid-column(3);
}
.breadcrumbs {
#include grid-column(12);
}
nav a {
}
Question
Why is the bootstrap-sass makeColumn(X) mixin not behaving the same as the Bootstrap .spanX class? For example, a class using makeColumn(9) does not look the same as the same div using a .span9 class.
Context
I'm building an application using Ruby on Rails and having major problems trying to use the mixins in the bootstrap-sass gem.
When I use the classes I've defined I don't get the same styling as if I were to just use the .span class in Bootstrap. I've looked all over the Internet and can't figure out what's wrong. I'm guessing it's something fairly obvious that I'm just not seeing because I've been staring at a screen for too long.
HTML
<div class="content">
<div class="main">...</div>
<div class="sidebar">...</div>
</div>
scss file
#import "bootstrap";
body {
.main-content {
#extend .container;
}
.content {
#include makeRow();
}
.content .main {
#include makeColumn(9);
}
.content .sidebar {
#include makeColumn(3);
}
.feature {
#include makeColumn(4);
}
padding-top: 60px;
}
footer {
#extend .container;
}
#import "bootstrap-responsive";
Thanks for the help.
I'm not sure what SASS Adaptation you're using but in the one I'm using (https://github.com/anjlab/bootstrap-rails), there isn't a lot of documentation and the format changes.
Instead of #include makeRow(); you have to use:
#include make-row();
Instead of #include makeColumn(3); you have to use:
#include make-column(3);
more documentation can be found here: https://github.com/anjlab/bootstrap-rails/blob/master/app/assets/stylesheets/twitter/bootstrap/_mixins.scss