如何在SASS / SCSS生成的CSS样式表中保留PHP变量?

时间:2012-02-03 02:04:13

标签: php sass compass-sass

我正在开发一个新的大型PHP / Symfony 2项目,并决定使用Sass / SCSS和Compass,我发现它们在以现代方式管理CSS方面非常棒。但是,还有一个问题我找不到任何答案:如何将PHP变量放在原始SCSS文件中并将它们保存在输出CSS文件中?

这不是一个细节,因为如果没有这个功能,就无法将Sass生成的样式表与PHP接口,这在一些大型项目中可能会受到限制。

要明确,作为一个起点,我们可以用经典的方式将CSS与PHP接口,主要是这样:

<link type="text/css" href="layout.css.php?my_var=#CC0000" rel="stylesheet" />

然后在伪CSS文件layout.css.php中,如上例所示:

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

.my_color {
  background-color:<?=$_GET['my_var']?>;
}

现在,我如何在SCSS / Compass中做同等的事情?换句话说,如何在原始SCSS文件中放置一些PHP变量,这些变量将保留在最终的CSS输出文件中,以便可以使用PHP进行进一步实时解析,如上例所示? < / p>

当我尝试这样做时,Compass和SASS编译器由于PHP语法而失败。

Phamlp有一些PHP过滤器,仅适用于haml模板,而不适用于SCSS文件。

LESSphp好像有such functionality,但很多人似乎都在从LESS转到SCSS / Compass,那么最好的方法是什么?

非常感谢。

1 个答案:

答案 0 :(得分:3)

我真的不认为你想做你想做的事。

Sass,LESS和Stylus等语言的主要优势之一(NB:我相信Stylus是一种比Sass更强大,更灵活的语言)是它们预处理到可以缓存的裸CSS通过浏览器或由CDN分发。如果您随后通过PHP运行静态内容,则完全失去了这一优势。

我相信在这个时代,像你似乎想要实现的动态样式内容的正确方法是使用Javascript:让您的应用程序提供静态JS文件,然后使用动态数据扩充它。在这个例子中,你将有一个函数询问服务器“用户首选的背景颜色是什么?” (通过XMLHttpRequest或通过查看与原始PHP编写的页面一起提供的JSON对象)。然后,它可以使用诸如jQuery之类的帮助程序库在适当的元素或类上设置适当的属性。

这种方法与服务器端CSS生成相比具有很大的优势(例如正确的缓存,更大量的服务器端静态内容,这意味着更好的站点响应能力,改进的关注点分离,更容易实现备用UI,因为服务器不是不设置显示属性,...) - 而唯一的缺点是它需要一个支持JS的浏览器。请考虑一下。