CODEWITHSUNDEEP
cssangularjssassless
G. Rao
G. Rao

Reputation: 45

How can I setup up customizable CSS based on the subdomain?

I'm setting up a single instance single database multi-tenant application. The backend is written in Ruby on Rails, while the frontend is a separate app in AngularJS with a Rails framework.

I'm using a resolve on an abstract parent state to determine the subdomain, and subsequently the tenant. Once the tenant is determined, I want to be able to read CSS variable values from a config file on the front-end that can then be used to generate the main styles.css file that contains the classes referenced in the rest of the project.

I've heard that CSS pre-processors like Sass and Less can be used to accomplish this, but I have no experience with either and I'm stuck trying to figure out exactly how to set this up.

Some help / code examples would be appreciated - thanks!

Upvotes: 0

Views: 766

Answers (1)

JakeParis
JakeParis

Reputation: 11210

Sass or Less won't really do what you want because they are compiled in advance of the browser loading them. In other words, the browser only loads the compiled css file.

There are however a few methods of achieving your goal. I'm not familiar with Ruby, so I'll try to keep my server language suggestions generic. These are obviously not meant as full solutions because I don't know your full situation. Instead these are just some ideas to give you some leads.

Probably the best method would be to use server logic to apply a different class to the body tag, then use that class to determine what styles are applied to the page. So for example: 

/* probably a good idea to have fallback styles */
body {
  color: black;
  background: white;
  }

body.style-one p {
  color: red;
  background: blue;
  }

body.style-two p {
  color: blue;
  background: red;
  }
<body class="style-one">
  <p>This text will be red.</p>

You could also, of course, change the class of the body tag using javascript, and therefore the user could change the theme of the page.

Alternatively, you could use similar server logic to write out a secondary <link rel="stylesheet"...> tag to pull in one or another stylesheet. The real advantage here is that if you a large number of rules for the various themes, you can keep them nicely separate in their own files.

One last method I've used (with php) is to create the stylesheet on the fly based on GET variables, but print out the stylesheet as a css file. The downside of this method is that I think you lose some browser caching advantage. In any case, that might look something like this:

<?php
header("Content-Type: text/css");

if( $_GET['theme'] == 'one' ) {

  echo 'p { color: red; }';

} else {
  
  echo 'p { color: blue; }';
  
}
?>

a {
  color: green;
}
<link rel="stylesheet" href="style.css.php?theme=one">

Upvotes: 3

Related Questions