控制CSS中的相对URL

Question

我的产品页面安排如下：

home_directory/products/product_one/  
home_directory/products/product_two/  

等

每个目录都有自己的“index.html”，“first_image_small.jpg”，“first_image_large.jpg”，“second_image ......你明白了。

我正在使用CSS“背景图像”和媒体查询，以便这些图像将切换为屏幕尺寸“onLoad”和当有人翻转肖像/风景或调整其浏览器大小时。 （顺便说一句，如果你知道如何在JavaScript中做到这一点，请查看this question，因为到目前为止唯一的答案是“onLoad” - 只是）。

无论如何，根据this question，如果我尝试将每个“index.html”链接到单个样式表，它将查找相对于样式表目录而不是每个“index.html”的图像（和是的，我理解为什么它需要那样。）

显而易见的解决方案是在每个产品目录中复制样式表，但这对于维护来说是一团糟。更优雅的解决方案？

Answer 1

似乎不可能在css中使用相对url使用另一个基本路径而不是css文件的路径。 specification州：

  

部分URL相对于样式表的来源进行解释，而不是相对于文档

但是，如果您不想使用任何服务器端脚本或javascript，则可以对服务器上的css文件进行符号链接。这将允许您只在一个地方编辑文件：

假设你的目录结构和css位于：home_directory/style.css。在unix命令行上执行以下操作：

cd home_directory
ln -s style.css products/product_one/
ln -s style.css products/product_one/

您将创建指向原始文件的符号链接。浏览器将能够从不同的路径访问它们。

如果您使用的是apache webserver，则可能需要允许使用符号链接。为此，将以下行添加到配置或.htaccess

Options +FollowSymLinks

或者，您可以设置服务器重写规则，该规则将从任何路径提供css文件，而无需符号链接。可以找到apache的文档here。

Answer 2

如果允许使用Less / Sass，则有一个非常直接的解决方案：使用Less / Sass导入css文件。

---

让我们看看如何使用Less完成它。假设您的文件夹结构如下所示：

• home_directory
  • css（ 您的常见css文件到此处 ）
  • 产品
    • 产品1
      • css
      • images
    • 产品2
      • css
      • images

对于您的常见css文件（位于 home_directory / css 中）：

• 与产品相关的所有样式都有相对路径。例如：background:url("../images/pic.jpg");
• 将扩展名从.css更改为.less（我不知道这是否有必要，但如果我将扩展名保留为.css则会出现问题）
• 导入.less文件时，请使用rel="stylesheet/less"

对于产品css文件（位于 home_directory / products / productX / css ）：

• Less文件将包含所有产品的相同内容。

• 它只有一行代码（假设你的常见css文件是styles.less）：

   @import "../../../css/styles.less";
  

......基本上就是这样。您无需更改产品样式表的内容，只需更改常用的css文件即可。

注意：您必须使用Less编译器编译样式，它将自动为您生成CSS。或者，如果您不喜欢编译器，可以使用less.js文件（尽管它仅建议用于测试而不是用于生产）