SASS项目中的从右到左（RTL）支持

我想知道是否有可能将mixin处理多个参数作为应该转换为rtl的属性。我想要做这样的事情SASS项目中的从右到左（RTL）支持

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

与一个mixin：

$rtl = false !default; 

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

}

我想我应该解析@content，但它在” ...... H $不起作用（CSS无效在属性 “：预期表达（例如1像素，粗体），呈” @content {）

现在我处理RTL 2个VARS：

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

，我改变时，它是rtl。我用它在我的sass文件中，如

margin-#{$dir}: 15px;

但我不认为这个解决方案足够灵活。而且我也不想在每个CSS属性中包含一个单独的mixin。

有人有更好的主意或解决方案吗？任何反馈欢迎

来源

2013-01-07 woutvdd

现在我使用RTL 一个简单的检查 '.cssBlock { 边距：50像素; @if $ ltr {margin} - left：30px; } @else {margin：15px; margin：30px; } }' – woutvdd

什么东西像@mixin与可选参数将用于任何CSS选择器。

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

现在让我们说你有一个名为“mySelector” CSS选择器，你只需要改变填充和宽度...

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

来源

2013-01-07 23:23:29

不一样的做法，但bi-app-sass将解决rtl问题，它会为你创建2个不同的样式表

创建必要的文件（在上面的链接中解释过）之后，你所要做的就是为左/右属性调用预定义的mixin （浮动，边框，保证金，填充文本对齐...）

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

也有这个项目的端口较少语言

bi-app-less

更新

in bi-app-sass有rtl & ltr条件混入就是来处理特殊情况下非常有用，请看下面的例子

.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; 
    } 
}

注意，这个功能在bi-app-less

来源

2013-02-11 10:28:07

以下SCSS进口的支持增加了一些有用的变量，函数，和mixins。

View on GitHub

// 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); 
}

来源

2013-09-07 18:05:25 anon

我会建议使用一个单一的混入，可以很容易地处理这两种情况下含。嵌套的选择：

_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';

，这将产生不RTL文件。

如需进一步信息校验=>https://github.com/davidecantoni/sass-rtl-mixin

来源

2015-07-09 19:31:33 Spidi

SASS项目中的从右到左（RTL）支持

回答

相关问题