Commutation de thème utilisateur avec Sass - Ruby sur rails

Une option consiste simplement à charger simplement un ensemble de règles CSS personnalisées (votre thème) après votre application.css et de laisser votre thème remplacer les couleurs par défaut de l'application.css. Vous pouvez simplement ajouter une colonne de base de données "Theme" et charger le CSS avec ce nom de manière dynamique.

Sass n'est pas conçu pour la compilation de données dynamiques à la volée. Si vous souhaitez un traitement dynamique du CSS, vous pouvez ajouter une méthode de contrôleur appelée "Custom_CSS" et faire cette réponse au format CSS et le charger de manière dynamique avec des variables en ligne, mais je ne pense pas que SASS est destiné à être utilisé pour le tout.

La réponse de Sergio est valide, mais omet les détails impertinents et j'avais utilisé une approche légèrement différente.

Vous utilisez Sass dans les rails - ne vous battez pas le courant, soyez rabais et laissez le pipeline d'actif avant tout votre CSS. Sauf si vous essayez de faire quelque chose d'extrême comme CSSZengarden avec des centaines de thèmes strong>, ou chaque thème est des milliers de lignes forts> je vous recommanderais de définir chaque thème car sa propre classe CSS plutôt que son propre fichier. p>

• 1kb de CSS supplémentaire dans le fichier d'application rendue.CSS ne va pas déranger vos utilisateurs li>
• Il est simple d'allumer des cours de thème avec jQuery: $ (". thème thème"). Removeclass ([[tous vos thèmes]). addclass ("myLittlePonytheme"); Code> LI>
• Comme impliqué, vous devrez marquer les éléments que vous souhaitez la mise à jour avec le thème ThemedElement Code> Classe Li> ul>

  Vous pouvez également changer la classe sur votre élément de niveau supérieur et faire une utilisation libérale de l'héritage et du ! Important code> Déclaration, bien que je trouve l'autre approche plus maintenue. P >

  Si vous pensez que vous pouvez gérer vos thèmes avec des classes plutôt que des fichiers, voici comment nous les générer avec SASS. Sass ne prend pas en charge les objets de style JSON, nous devons donc nous retrouver et mettre en place un tas de matrices parallèles avec les propriétés thématiques. Ensuite, nous iTerons sur chaque thème, remplacez les propriétés dynamiques dans la classe de thème générée automatiquement et vous êtes partis sur les courses: p>

  themes.css.scss. / strong> p> P> P>

  @import "global.css.scss";
  
  /* iterate over each theme and create a CSS class with the theme's properties */
  @for $i from 1 through 4{
  
              /* here are the names and dynamic properties for each theme class */
      $name: nth(("DefaultTheme", 
                          "MyLittlePonyTheme",
                          "BaconTheme",
                          "MySpaceTheme"
                          ), $i);
      $image: nth(("/assets/themes/bg_1.png", 
                           "/assets/themes/bg_2.png",
                           "/assets/themes/bg_3.png",
                           "/assets/themes/bg_4.png"
                          ), $i);
      $primary: nth((#7ca8cb,
                             #3c6911,
                             #d25d3a,
                             #c20d2c
                            ), $i);
      $font: nth((Rosario, 
                          Helvetica,
                          Comic Sans,
                          WingDings
                         ), $i);
  
  
      /* Now we write our Theme CSS and substitute our properties when desired */
  .#{$name}{
      &.Picker{
        background-image:url($image);
      }
      color: $primary;
      .BigInput, h1{
        color: $primary;
        font-family: $font, sans-serif !important;
      }
      .Frame{
          background-image:url($image);
      }
      .Blank:hover{
          background-color:mix('#FFF', $primary, 90%) !important;
      }
      .BigButton{
          background-color:$primary;
          @include box-shadow(0,0,10px, $primary);
      }
              /* and so on... */
         }