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

【问题标题】：Maintain RTL version of stylesheets with rails asset pipeline使用 rails 资产管道维护样式表的 RTL 版本
【发布时间】：2012-07-05 17:09:27
【问题描述】：

背景

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

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

此功能有两个用例：

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

到目前为止，我已经成功地实现了一个 RTLConverter，它使我能够提供所有转换为 RTL 的样式表，而无需触及它们：

config/initializers/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

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

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

我的问题

如何连接到资产管道以便：

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

注意事项：

转换器不能与 sass 引擎一起使用，但使用 less 似乎可以正常工作。它已被应用到一个基于 twitter-bootstrap 的网站上，效果非常好。

转换器尚未在生产中进行测试。

如果我能找到解决这个问题的好方法，我打算创建和维护一个 gem 并将其回馈给社区。p>

【问题讨论】：

标签： ruby-on-rails asset-pipeline right-to-left sprockets

【解决方案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，您有一个共同的地方来定义标准变量，例如上面示例中的边距。你的旅费可能会改变。但对我来说，这听起来比搞乱资产管道更简单。

【讨论】：

不错的方法，但也需要维护更多的 CSS。但是，我不知道如何使用像 twitter-bootstrap 这样的供应商 css 很好地做到这一点。
首先加载 twitter 引导程序。然后您的自定义更改之后。您的自定义 CSS 将覆盖 twitter CSS。如果存在优先级冲突，您始终可以诉诸 !important 定义。
是的，这当然是一种可能性，但这意味着我必须创建和维护我的项目使用的所有“供应商”css 的“翻转”版本。我可能会求助于这个，但我希望有更好的方法......
不是解决方案，而是维护“翻转”版本...如果您使用 gem 进行 twitter 引导，您可以分叉 github 项目，然后创建一个名为“upstream”的远程，它指向主项目。通过这种方式，您可以将上游更改拉入您的分支，并随着您的成长管理差异。

【解决方案2】：

不幸的是，其他答案都没有真正表明我正在寻找的解决方案，所以在深入研究之后，我想出了一个可以根据文件名翻转样式表的简单 gem。

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

在 rubygems.org 上查找宝石：stylesheet_flipper

在 gihub 上找到使用说明：monibuds/stylesheet_flipper

【讨论】：

我什至为此写了一篇简短的博文：jeppe.liisberg.dk/2012/08/08/stylesheet_flipper

【解决方案3】：

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

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

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

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

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

（我不会在这里寻求赏金，因为这只是一个想法，而不是解决方案）

【讨论】：

【解决方案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;
}

【讨论】：