Question

我正在设置单实例单数据库多租户应用程序。后端是用Ruby on Rails编写的，而前端是AngularJS中带有Rails框架的独立应用程序。

我在抽象父状态上使用解析来确定子域，然后是租户。一旦确定了租户，我希望能够从前端的配置文件中读取CSS变量值，然后可以使用该文件生成包含项目其余部分中引用的类的主要styles.css文件。

我听说像Sass和Less这样的CSS预处理器可以用来实现这一目标，但是我没有任何经验，而且我一直试图弄清楚如何设置它。

一些帮助/代码示例将不胜感激 - 谢谢！

Answer 1

Sass或Less不会真正做你想要的，因为它们是在浏览器加载之前编译的。换句话说，浏览器只加载已编译的css文件。

然而，有一些方法可以实现您的目标。我不熟悉Ruby，所以我会尝试保持我的服务器语言建议的通用性。这些显然不是完整的解决方案，因为我不知道你的完整情况。相反，这些只是为您提供一些线索的一些想法。

可能最好的方法是使用服务器逻辑将不同的类应用于body标记，然后使用该类来确定应用于页面的样式。例如：

/* 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>

当然，您也可以使用javascript更改body标签的类，因此用户可以更改页面的主题。

<小时/> 或者，您可以使用类似的服务器逻辑来写出辅助<link rel="stylesheet"...>标记以引入一个或另一个样式表。这里的真正优势在于，如果你有各种主题的大量规则，你可以将它们保存在自己的文件中。

<小时/> 我使用的最后一种方法（使用php）是基于GET变量动态创建样式表，但是将样式表打印为css文件。这种方法的缺点是我认为你失去了一些浏览器缓存优势。在任何情况下，这可能看起来像这样：

<?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">

如何基于子域设置可自定义的CSS？

1 个答案: