如果 class 存在，Susy 将流从 rtl 更改为 ltr

Question

如果正文中存在 ar class，我需要将 $susy 变量从 rtl 更改为 ltr。我需要在我的网站上支持多语言，下面是相同的代码

.page-container {
    background-color: red;
    @include container($susy);

    @include susy-breakpoint($medium) {
        background-color: yellow;
        @include container($susy-medium);
    }

    @include susy-breakpoint($large) {
        background-color: lightgreen;
        @include container($susy-large);
    }

    &.ar {
        //change flow to rtl
    }

}


$medium: 768px; //tab
$large: 1024px; //desktop

//susy grid params small
$column-numbers-small: 6;
$column-width-small: 40px;
$column-gutter-small: 16px;
$available-width-small: 336px;

//susy grid params medium
$column-numbers-medium: 12;
$column-width-medium: 42px;
$column-gutter-medium: 20px;
$available-width-medium: 744px;


//susy grid params large
$column-numbers-large: 12;
$column-width-large: 86px;
$column-gutter-large: 24px;
$available-width-large: 1320px;

$susy: (
    container: $available-width-small,
    container-position: center,
    columns: $column-numbers-small,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-small/$column-width-small,
);

$susy-medium: (
    container: $available-width-medium,
    container-position: center,
    columns: $column-numbers-medium,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-medium/$column-width-medium,
);

$susy-large: (
    container: $available-width-large,
    container-position: center,
    columns: $column-numbers-large,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-large/$column-width-large,
);

$susy-large-ar: (
    flow: rtl,
    container: $available-width-large,
    container-position: center,
    columns: $column-numbers-large,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-large/$column-width-large,
);

有人可以建议如何动态覆盖此流向。

Answer 1

按照您目前的构图方式，这是不可能的。使用预处理器（如 Sass）的主要限制之一是变量无法访问 DOM。这意味着无法根据主体 class 更改变量。有几种方法可以解决这个问题，但其中 none 是简单且完全动态的。基本上，您必须为每个方向创建重复的样式。

选项 1：单独输出 CSS

有些人使用单独的 ltr 和 rtl 样式表来做到这一点。您无需添加 class 来翻转方向，而是加载不同的样式表。要使 Sass 正常工作，请创建两个 sass 文件（例如 ltr.scss 和 rtl.scss）——并像这样设置它们：

// set your flow at the top of each document…
$flow: (flow: rtl);

然后将您所有的实际样式放入 Sass "partials" (_filename)。其中一个部分可以将新流程合并到您现有的变量中：

// Merge flow with other Susy settings…
$susy: map-merge($susy, $flow);
$susy-medium: map-merge($susy-medium, $flow); // etc…

然后将您的部分导入到每个文档中。这样你就可以用不同的变量编译相同的代码…

@import 'flow-setup';
@import 'actual-style-partials';

选项 2：内联复制

我见过人们用来创建 class 系统（而不是拆分样式表）的另一个选项在您的代码中变得有点笨重：

.element {
  @include span(3 of 12);

  .rtl & {
    @include span(3 of 12 rtl);
  }
}

你可以编写一个 mixin 来自动为你做这件事：

@mixin flow-span($details) {
  @include span($details);

  $rtl: append($details, rtl);
  .rtl & {
    @include span($rtl);
  }
}

你必须对你使用的每个 Susy mixin 做同样的事情。

抱歉，这两个选项都不简单，但这是您在预处理器中可以做的最好的事情。

如果 class 存在，Susy 将流从 rtl 更改为 ltr

Susy change flow from rtl to ltr if a class exists

css

sass

multilingual

susy

选项 1：单独输出 CSS

选项 2：内联复制