Question

背景

我希望从左到右启用从右到左的语言环境，但我只想维护一组样式表。

我们的想法是调用application-rtl.css将提供application.css的rtl转换版本（使用r2）。

此功能有两个用例：

开发：动态提供，即时转换
production：预编译生成 -rtl 版本（扩展rake资产：预编译任务）

到目前为止，我已经设法实现了一个RTLConverter，使我可以将所有转换为RTL的样式表服务，而不必触及它们：

配置/初始化/ rtl_converter.rb：

require "r2"
require "tilt"

class RTLConverter < Tilt::Template
  def prepare; end

  def evaluate(context, locals, &block)
    R2.r2 @data
  end
end

Rails.application.assets.register_preprocessor 'text/css', RTLConverter

您也可以将其实现为sprockets的引擎，以仅转换具有 .rtl 扩展名的文件：

Rails.application.assets.register_engine 'rtl', RTLConverter

我的问题

如何挂钩资产管道以便：

使用名称后缀'-rtl'提供任何样式表的动态转换版本（查找没有后缀的文件并提供转换后的版本）？
在预编译期间使用所有样式表的名称后缀“-rtl”创建转换后的副本

备注：

转换器不能与sass引擎一起使用，但似乎可以正常工作。它已被应用于基于twitter-bootstrap的网站，并且像魅力一样。

转换器尚未投入生产。

如果我能找到解决这个问题的合适解决方案，我打算创建并维护一个gem并将其交还给社区。

Answer 1

我的目标是直接使用CSS来处理LTR-RTL差异。 CSS可以为您处理这项工作。如果你将CSS定义为LTR，那么，基于CSS类，你可以覆盖你想要的东西。

默认情况下，将整个CSS样式表定义为LTR。
在处理语言环境的主体上放置一个额外的css类。例如<body class="RTL">
通过覆盖前缀为“RTL”的CSS类来定义默认的所有异常

一个简短的例子。原始“默认”样式：

body { direction: ltr; }
.sidebar { width: 200px; float: right; margin-left: 30px }

然后，在css中稍后覆盖相关的样式：

body.rtl { direction: rtl; }
.rtl .sidebar { float: right; margin-right: 30px; }

/*remember to 'reset' all defaults for example: */
.rtl .sidebar { margin-left: 0; }

使用sass，您有一个共同的位置来定义标准变量，例如上面示例中的margin。你的旅费可能会改变。但对我来说，这听起来比搞乱资产管道更简单。

Answer 2

不幸的是，其他答案都没有真正提出我想要的解决方案，所以在深入研究问题后，我能够提出一个简单的宝石，可以根据文件名翻转样式表。

因此，通过包含该gem并提供样式表的版本并在名称后添加“-flipped”，我现在能够在开发和生产中提供自动翻转版本。

在rubygems.org上找到宝石：stylesheet_flipper

在gihub上查找用法说明：monibuds/stylesheet_flipper

Answer 3

据我所知，Sprockets不会将任何钩子暴露给处理器的路径查找机制。即使它确实如此，我也不认为你可以调用一些通用的“读取资产”方法。

总而言之，我担心让AP做你想做的事需要一些严肃的手臂扭曲。

所以这是一个完全不同的想法。如果您：

怎么办？

即使在开发过程中也完全放弃了动态资产处理
设置了Guard任务
- 在资源发生变化时重新编译资产（我认为这已存在）
- 生成已编译CSS的RTL版本
将已编译的资产推送到生产阶段（ gasp！）

换句话说，也许您可以交易一些AP功能以提高灵活性？

（我不打算在这里获得赏金，因为这只是一个想法，而不是解决方案）

Answer 4

一年前写过这个问题：
http://amitkazmirsky.com/2011/05/29/dry-your-rtl-and-ltr-css-files-in-rails-with-sass/

基本上我的方法是将带有方向的css写为变量：

#user-box {
    backgroud-color: white;
    padding: 0 5px;
    float: $dir;
}

#side-nav {
    margin-#{$opdir}: 5px;
}

使用rails资产管道维护RTL版本的样式表

背景

我的问题

4 个答案: