个人中心
gpt4 book ai didi

ruby-on-rails - 使用Rails Assets 管道维护样式表的RTL版本

转载 作者：行者123 更新时间：2023-12-04 03:59:22 25 4
gpt4 key购买 nike

背景

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

这个想法是，调用application-rtl.css将提供rtt转换后的application.css版本(使用r2)。

此功能有两个用例:

  • 开发:动态服务，即时转换
  • 生产:通过预编译生成-rtl版本(扩展rake Assets :预编译任务)

    • 到目前为止，我已经成功实现了一个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

    您还可以将其实现为 sprockets 的引擎，以仅转换扩展名为.rtl的文件: 
    Rails.application.assets.register_engine 'rtl', RTLConverter

    我的问题

    如何连接 Assets 管道，以便:
  • 提供带有名称后缀“-rtl”的任何样式表的即时转换版本(查找不带后缀的文件并提供其转换后的版本)吗？
  • 在预编译期间使用所有样式表的名称后缀“-rtl”创建转换后的副本

    • 注意:

    转换器不能与Sass引擎一起使用，但看起来工作得很好，但花费更少。它已被应用到基于twitter-bootstrap的网站，并且像一个 super 按钮一样工作。

    该转换器尚未在生产中经过测试。

    如果我能找到一个解决这个问题的不错的方法，我打算创建和维护一个 gem ，并将其返还给社区。

    最佳答案

    我的目标是仅直接使用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。你的旅费可能会改变。但是对我来说，这听起来比弄乱 Assets 管道更简单。

    关于ruby-on-rails - 使用Rails Assets 管道维护样式表的RTL版本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11349186/

    25 4 0
    文章推荐： architecture - 单个服务器上的 Map/Reduce
    文章推荐： ruby-on-rails - RSpec的should_receive和should_not_receive都通过了异常传递
    文章推荐： image - R:将 alpha 值添加到 png-image
    文章推荐： apache-kafka - Apache 点燃与 Apache 卡夫卡
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com