2

Rails4 で Sass を利用してスタイルシートを記述しています。

Sass は変数が使えるのでとても便利なのですが、 Sass で定義した変数の値を Javascript から変更するというようなことはできますでしょうか。

たとえば以下の様な Sass ファイルを作成し「赤」をテーマカラーに設定していた場合:

$theme-color: #FF0000

body
  color: $theme-color

.box
  background: $theme-color
  color: white

.message
  border: solid 1px $theme-color
  &:after
    content 'message:'
    color: $theme-color

$theme-color の値を Javascript から #0000FF に切り替え、サイトのテーマカラーを一括で変更するというようなことはできますでしょうか。

1 件の回答 1

4

$theme-color の値をJavaScriptで変更する、というのは難しいと思います。
WEBブラウザは、SassからビルドされたCSSを読み込み、そのスタイルを適用しているためです。

以下のようなSassを用意し、JavaScriptで別テーマのスタイルを適用したいタグにクラスを割り当てる、というのはいかがでしょうか。(変数名のセンスは、目をおつぶりください…)

$theme-color: #FF0000
$theme2-color: #0000FF

body
    color: $theme-color
    &.theme2
        color: $theme2-color

    .box
        background: $theme-color
        color: white
        &.theme2
            background: $theme2-color

    .message
        border: solid 1px $theme-color
        &:after
            content 'message:'
            color: $theme-color
        &.theme2
            border
                color: $theme2-color
1
  • やはりそうですよね。 urlパラメータで値を渡す方法も考えられると思ったのですが その場合もリクエストのたびにコンパイルが発生するので現実的ではないですよね。ありがとうございました。その方法で試してみます。
    – hojo
    Commented 2015年1月10日 11:22

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。