SASS 项目中的从右到左 (RTL) 支持答案

【问题标题】：right-to-left (RTL) support in SASS projectSASS 项目中的从右到左 (RTL) 支持
【发布时间】：2012-12-21 09:09:15
【问题描述】：

我想知道是否有可能制作一个将多个参数作为应转换为 rtl 的属性来处理的 mixin。我想做类似的事情

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

使用混合：

$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 $property in”之后的无效CSS：预期表达式（例如1px，粗体）是“@content {）。

现在我用 2 个变量处理 rtl：

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

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

margin-#{$dir}: 15px;

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

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

【问题讨论】：

现在我正在使用一个简单的检查 rtl .cssBlock{ margin-top: 50px; @if $ltr { margin-left: 30px; } @else { margin-right: 30px; } }

标签： sass compass-sass right-to-left

【解决方案1】：

不是同一种方法，但是bi-app-sass 会解决 rtl 问题，它会为你生成 2 个不同的样式表

创建必要的文件后（在上面的链接中进行了解释），您所要做的就是为左/右属性（浮动、边框、边距、填充、文本对齐...）调用预定义的 mixin

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

这个项目还有一个用于较少语言的端口

bi-app-less

更新

在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 不支持此功能

【讨论】：

【解决方案2】：

以下 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);
}

【讨论】：

【解决方案3】：

我建议使用一个可以轻松处理这两种情况的 mixin，包括。嵌套选择器：

_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

【讨论】：