如果 class 存在,Susy 将流从 rtl 更改为 ltr
Susy change flow from rtl to ltr if a class exists
如果正文中存在 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,
);
有人可以建议如何动态覆盖此流向。
按照您目前的构图方式,这是不可能的。使用预处理器(如 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 做同样的事情。
抱歉,这两个选项都不简单,但这是您在预处理器中可以做的最好的事情。
如果正文中存在 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,
);
有人可以建议如何动态覆盖此流向。
按照您目前的构图方式,这是不可能的。使用预处理器(如 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 做同样的事情。
抱歉,这两个选项都不简单,但这是您在预处理器中可以做的最好的事情。