15

Rails で動的 CSS を作成する最良/最も効率的な方法は何ですか。サイトの管理領域を開発しています。ユーザーがプロファイルのスタイル (主に色) をカスタマイズできるようにしたいと考えています。これも保存されます。

Rubyスクリプトをcssファイルに埋め込むだけですか？ファイル拡張子を css から変更する必要がありますか?

ありがとう。

4

6 に答える 6

24

Rails 3.1 では、スタイルシートを erb で前処理することができます。

ここでdynamic.css.scss.erb、. それはerbによって（そしてSassによって）処理され、そのため次のようなものを含めることができます.erbapp/assets/stylesheets

.some_container {
    <% favorite_tags do |tag, color| %>
    .tag.<%= tag %=> {
        background-color: #<%= color %>;
    }
    <% end %>
}

任意のスタイルシートと同じように含めることができます。

どの程度動的であるべきか?

ただし、一度しか処理されないため、値が変更されてもスタイルシートは変更されないことに注意してください。

完全に動的にする非常に効率的な方法はまだないと思いますが、すべてのリクエストに対して CSS を生成することは可能です。この警告を念頭に置いて、Rails 3.1 のヘルパーを次に示します。

  def style_tag(stylesheet)
    asset = YourApplication::Application.assets[stylesheet]
    clone = asset.class.new(asset.environment, asset.logical_path, asset.pathname, {})
    content_tag("STYLE", clone.body.html_safe, type:"text/css")
  end

使用方法は次のとおりです。

まず、上記のヘルパーを にコピーしapp/helpers/application_helper.rbます。

その後、次のようにページに含めることができます。

<% content_for :head do %>
  <%= style_tag "dynamic.css" %>
<% end %>
The rest of your page.

レイアウトでコンテンツが使用されていることを確認してください:head。たとえば、次のlayout/application.html.erbようになります。

...
<HEAD>
  ....
  <%= yield :head %>
</HEAD>
...

この投稿のおかげでこれを見つけました。

于 2011-12-08T19:46:52.667 に答える
2

CSS で ERB を使用できます。コントローラーで css をレンダリングするだけです。ただし、このように頻繁に要求されるリソースについては、毎回これを生成することはお勧めしません。ユーザーのスタイルシートを memcached または redis に保存し、毎回ファイルを再レンダリングするのではなく、ページが読み込まれたときにそこから呼び出します。スタイルが更新されたら、キャッシュを期限切れにすることができますが、ページがレンダリングされたときにキャッシュが再構築されることを確認してください。

于 2010-08-24T15:09:21.770 に答える
1

何年にもわたって多くの開発が行われてきましたが、最近、この質問が求めていることを行う方法を見つけました。そして、誰かがこれに答えてから約9〜10年経ったので、私は2セントを入れようと思いました.

他の人が言っているように、CSS はプリコンパイルされており、ファイル内で動的に変更できないため、Ruby コードを CSS ファイルに直接配置することはお勧めできません。ファイル外で動的に変更可能！

将来の読者が CSS 変数の使い方を知らない場合に備えて、CSS 変数の簡単な概要を示す必要があります。

CSS では、コーディング言語内で変数を使用して、一度に多くの要素を簡単に変更できるようにしています。これらの変数は、セクション内の CSS ファイルの先頭に配置しますroot。このような：

:root {
    --primary: #0061f2;
    --secondary: #6900c7;
}

これらの色のいずれかの要素をスタイルしたいときはいつでも、次のvar(--variableName)ように簡単に配置できます。

.btn{
   color: var(--secondary);
   background-color: var(--primary);
}

.h1 {
   color: var(--primary);
}

rootセクション内の変数を変更して、CSS 内の他のすべてのインスタンスを変更する方がはるかに簡単であることがわかります。

次に動的Ruby部分です。

アプリケーション ファイル (または、この質問の場合は管理者のダッシュボードのテンプレートを保持するファイル)の<head>セクションで、動的変数を使用して CSS 変数を再宣言し、それらを重要としてマークする必要があります。たとえば、ユーザーがダッシュボードのプライマリ カラーとセカンダリ カラーを選択できるようにし、それらが like: user.primary_colorandというユーザー プロファイルに保存されているとしuser.secondary_colorます。<head>これをセクションに追加する必要があります。

<style>
  :root{
    --primary: <%= user.primary_color %> !important;
    --secondary: <%= user.secondary_color %> !important;
  }
</style>

この!importantタグは、CSS ファイルで見つかった変数をオーバーライドするため、ユーザーはダッシュボードの CSS とビューを動的に変更し、永続的なままにすることができます (値はプロファイルに保存されるため)。

これが将来の開発者に役立つことを願っています。

ハッピーコーディング！

于 2020-08-09T06:50:11.903 に答える
0

現在、Rails で動的 CSS を生成するための多くのオプションがあります。

CSS の使用を減らすことができます- 追加機能を備えた CSS の拡張機能です。

Gem Less css for railsは、アセット パイプラインで Less スタイルシート言語を使用して、Rails プロジェクトの統合を提供します。

Twitter のブートストラップを使用している場合は、このless rails bootstrapを確認してください。

また、もう 1 つの CSS 拡張言語Sassを使用して CSSを生成できます。これがSaas rails gemです。

Rails のDynamic CSSとRender Rails assets を確認して、 Asset Pipelineに関するブログ投稿と記事をストリングします。

関連するSO質問:

于 2010-08-24T13:46:29.127 に答える
0

これを別のサイト用に作成しました。データベースから色の値を取得し、現在のユーザーのアカウントに基づいてカスタマイズされた CSS をレンダリングするコントローラー アクションとビューがあります。最適化するために、組み込みの Rails ページ キャッシングを使用しています。これはコピーをディスクに保存し、それを静的アセットとして提供します。素晴らしく速い。

これはERBコードの例です

#header { background: <%= @colors["Header Stripe Background"] %>; border: 1px solid <%= @colors["Header Stripe Border"] %>; }
#header h1 {color: <%= @colors["Headline Color"] %>; }
#header p a { background: <%= @colors["Control Link Background"] %>; color: <%= @colors["Control Links"] %>;}
#header p a:hover {background: <%= @colors["Control Link Hover"] %>; text-decoration:underline;}
于 2010-08-24T17:18:10.577 に答える