用户主题切换与SASS - Ruby on Rails [英] User theme switching with SASS - Ruby on Rails

问题描述

所以我有一个rails管理系统，将允许用户选择一个主题，基本上是一组SASS颜色变量，将重新编译application.css.scss与新的颜色。当用户从下拉列表中选择并提交时，如何改变这种方式的最佳方式是什么？我读了一些关于缓存和重新编译的问题，但我不完全清楚如何设置它。

So I have an rails admin system that will allow a user to choose a theme, basically a set of SASS color variables that will recompile application.css.scss with the new colors. How would be the best way of going about changing this when the user selects from a drop down and submits? I read some up on some problems with caching and recompiling but I'm not totally clear how to set it up.

目前我有..

application.css.scss

application.css.scss

@import "themes/whatever_theme";
@import "common";
@import "reset";
@import "base";

themes / _whateverTheme

themes/_whatever_theme

$theme_sprite_path: '/images/sprite_theme_name.png';
$main_color:#009DDD;
$secondary_color:#b3d929;
$light_background:#f2f2f2;
$border_line:#e6e6e6;
$off_white:#f9f9f9;
$white:#ffffff;
$font_body:#565b59;
$font_headers:#363a36;

说我有5个不同的主题，用户会在之间切换，每个主题在Rails然后将这些传递到SASS并在飞行中更改它们并重新编译。

Say I have 5 different themes the user will switch between, it would be nice to set variable names for each theme in Rails then pass these down to SASS and change them on the fly and recompile. Is this the best way to go about this?

推荐答案

3个简单的步骤：

1. 在部署时将所有主题编译为不同的文件。

1. Compile all themes into different files upon deploy. This will take care of timestamping, zipping, etc.

使用默认主题的渲染页面。

Render page with default theme.

使用JavaScript加载替代主题CSS。

Use javascript to load alternate theme CSS.

No need to mess with dynamic compilation and all that.

要动态加载CSS，您可以使用这样的东西：

To load a CSS dynamically you can use something like this:

function loadCSS(url) {
  var cssfile = document.createElement("link");
  cssfile.setAttribute("rel", "stylesheet");
  cssfile.setAttribute("type", "text/css");
  cssfile.setAttribute("href", url);
}

这篇关于用户主题切换与SASS - Ruby on Rails的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！