4368


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

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

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

[code]

    $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
    
[/code]

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


CC BY-SA 3.0
2015-01-10T08:26:14.350
4365
2015-01-10T13:32:38.413
2015-01-10T13:32:38.413
4978
5840
question
javascript ruby-on-rails sass
Rails4 で Sass に定義した変数の値を Javascript から変更できますか？


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

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

[code]

    $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
    
[/code]


CC BY-SA 3.0
2015-01-10T09:13:04.537
4368
2015-01-10T09:13:04.537
5827
4365
answer