如何在CSS文件里加入变量

最新推荐文章于 2024-05-21 23:34:10 发布
最新推荐文章于 2024-05-21 23:34:10 发布
阅读量2.8k 收藏
点赞数
文章标签： css stylesheet function header .htaccess file

前言

这个技巧说来很简单。我们让Apache把任何stylesheet重定向到一个指定的PHP脚本。该脚本会一行行读取stylesheet的内容，找到并替换任何用户自定义的变量，最终会重新生成一个CSS样式表。浏览器不会发觉到有什么地方不同。在后面，我们会讨论如何缓存生成的最终结果避免加大CPU的负载。

请注意，这个教程需要读者懂得一些基本的PHP（OOP）、Apache和HTTP知识。


系统要求:
  • Apache，Rewrite mod 打开
  • PHP 5

 



第一步 – 创建项目工程

首先，建立一个简单的项目结构，在项目的根目录下创建一个index.html文件。

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
  5. <title>Variables in CSS Files… It’s possible!</title>
  6. <link href=“css/styles.css” rel=“stylesheet” type=“text/css” />
  7. </head>
  8. <body>
  9. <h1>Variables in Stylesheets</h1>
  10. <p>It’s possible!</p>
  11. <p>With PHP and Apache URL Rewrite Mod</p>
  12. </body>
  13. </html>

接着，创建一个CSS文件带有以下变量，保存在css目录下。

  1. $font: arial, sans-serif;
  2. $main-color: #3D7169; $secondary-color: #000;
  4. h1 {
  5. font: 200% $font;
  6. color: $main-color;
  7. }
  8. p {
  9. background: $secondary-color;
  10. color: $main-color;
  11. font-family: $font;
  12. padding: 10px;
  13. }

最后，创建一个名为enhanced_css.php的空PHP文件和一个空.htaccess文件。.htaccess 文件会覆盖服务器缺省的配置，并应用到各个子目录下去。

现在我们的项目看上去如下图所示:



第二步 – 重定向CSS文件到一个PHP脚本

我们希望把任何一个带有CSS后缀名的URL地址重定向到指定的PHP脚本。利用Apache的URL Rewrie模块可以实现这点。首先，确认rewrite_module模块已经打开。在Apache安装目录下找到httpd.conf文件。打开它，搜索下面这行代码：

  1. LoadModule rewrite_module modules/mod_rewrite.so

如果在前面有“#”号，把前面的“#”号去除，重新启动Apache以使设置生效。



接着，编辑.htaccess文件加入下面这些内容：

  1. RewriteEngine on
  2. RewriteRule ^(.*/.css)$ enhanced_css.php?css=$0

然后保存。如前面提到过的，上面这些内容就是让Apache捕捉所以带有.css后缀名的URL地址并重定向到enhanced_css.php。原CSS文件作为一个css参数对象传入。

例如：/css/styles.css 会被重定向到nhanced_css.php?css=/css/styles.css

注意：

一些服务器不允许它们的设置被用户覆盖。如果是这样，HTML代码里的样式表链接就要手工来替换。

例如，你要把

  1. <link href=“css/styles.css” rel=“stylesheet” type=“text/css” />

替换为

  1. <link href=“enhanced_css?css=css/styles.css” rel=“stylesheet” type=“text/css” />

第三步 – 通过PHP来分析CSS文件

因为CSS文件都被重定向到PHP脚本，我们要创建一个名为Enhancedcss的类来读取这些文件的内容，找到并替换变量，再生成纯CSS。通过传递$_GET['css']给构造函数来实例化这个类。记住.htaccess重定向访问请求后，通过$_GET可以获取当前stylesheet文件的路径。

  1. if (isset($_GET['css'])) {
  2. $css = new EnhancedCss($_GET['css']);
  3. $css->display();
  4. }

基本实现由四个方法组成，最后再加上一个把结果缓存的方法。

  1. class EnhancedCss {
  2. public $values;
  3. public $cssFile;
  5. public function __construct($cssFile) {
  6. // check if the css file exists
  7. }
  9. private function parse() {
  10. // open the css file and throw every line to
  11. // findAndReplaceVars method
  12. }
  14. private function findAndReplaceVars($line) {
  15. // find the variable definitions, store the values,
  16. // replace the variable by their defined values.
  17. }
  19. public function display() {
  20. // display the new parsed content
  21. }
  22. }
构造函数

我们检查是否有CSS文件存在。如果没有，脚本返回一个404 http错误。CSS文件的路径保存在$this->cssFile属性里，后面要用来生成缓存文件的名字。

  1. public function __construct($cssFile) {
  2. if (!file_exists($cssFile)) {
  3. header(‘HTTP/1.0 404 Not Found’);
  4. exit;
  5. }
  6. $this->cssFile = $cssFile;
  7. }
分析方法

该方法打开CSS文件并一行行读取里面的内容。

  1. private function parse() {
  2. $content = ”;
  3. $lines = file($this->cssFile);
  4. foreach($lines as $line) {
  5. $content .= $this->findAndReplaceVars($line);
  6. }
  7. return $content;
  8. }

这里用到了file 函数。该函数很有用，因为它打开一个文件并返回一个包含了每一行内容的数组对象。程序遍历每行内容，通过findAndReplaceVars这个方法来处理包含的变量。最后返回处理后的内容。

FindAndReplace方法

这个方法是最主要的部分。它找到定义好的变量后，把对应的值保存到一个数组里。当找到一个变量后，如果它对应的值已经存在，就用它的值替换已有值。

  1. private function findAndReplaceVars($line) {
  2. preg_match_all(‘//s*//$([A-Za-z1-9_/-]+)(/s*:/s*(.*?);)?/s*/’, $line, $vars);
  3. $found = $vars[0];
  4. $varNames = $vars[1];
  5. $varValues = $vars[3];
  6. $count = count($found);
  8. for($i = 0; $i < $count; $i++) {
  9. $varName = trim($varNames[$i]);
  10. $varValue = trim($varValues[$i]);
  11. if ($varValue) {
  12. $this->values[$varName] = $this->findAndReplaceVars($varValue);
  13. } else if (isset($this->values[$varName])) {
  14. $line = preg_replace(‘///$’.$varName.‘(/W|/z)/’, $this->values[$varName].‘//1′, $line);
  15. }
  16. }
  17. $line = str_replace($found, ”, $line);
  18. return $line;
  19. }

这里有很多代码，我们仔细一段段分析。

  1. private function findAndReplaceVars($line) {
  2. preg_match_all(‘//s*//$([A-Za-z1-9_/-]+)(/s*:/s*(.*?);)?/s*/’, $line, $vars);

这里，我们应用了正则表达式来处理当前行。这个表达式匹配当前行里所有像$variable:$value或$variable的变量。在本教程里，我们不对正则表达式做深入的讨论。

例如：CSS文件里第三行

$main-color: #3D7169; $secondary-color: #000;

将返回以下这个数组对象：

  1. $vars => Array
  2. (
  3. [0] => Array
  4. (
  5. [0] => $main-color: #3D7169;
  6. [1] => $secondary-color: #000;
  7. )
  9. [1] => Array
  10. (
  11. [0] => main-color
  12. [1] => secondary-color
  13. )
  15. [2] => Array
  16. (
  17. [0] =>  : #3D7169;
  18. [1] =>  : #000;
  19. )
  21. [3] => Array
  22. (
  23. [0] =>  #3D7169
  24. [1] =>  #000
  25. )
  26. )

我们假设$vars[0]包含了全部匹配的变量，$vars[1]包含了所有变量的名称，$vars[3]包含了所有变量的值。让我们重新对它们做一下调整，

  1. $found = $vars[0];
  2. $varNames = $vars[1];
  3. $varValues = $vars[3];

现在清晰多了。

  1. $found => Array
  2. (
  3. [0] => $main-color: #3D7169;
  4. [1] => $secondary-color: #000;
  5. )
  6. $varNames => Array
  7. (
  8. [0] => main-color
  9. [1] => secondary-color
  10. )
  11. $varValues => Array
  12. (
  13. [0] =>  #3D7169
  14. [1] =>  #000
  15. )

统计当前行找到多少个变量

  1. $count = count($found);

这样，我们就能遍历变量数组。为了更清晰一些，我们设置一些新的变量来处理名称和数值。

  1. for($i = 0; $i < $count; $i++) {
  2. $varName = trim($varNames[$i]);
  3. $varValue = trim($varValues[$i]);
  5. // …
  6. }
变量定义

如果$varValue值不为空，将面对一个定义变量的问题。因此把这个值保存到$this->values属性。

  1. if ($varValue) {
  2. $this->values[$varName] = $this->findAndReplaceVars($varValue);
  3. } else if …

注意，我们要再把变量值作为参数传递给findAndReplaceVars方法。这样的话，其他潜在的变量也会被处理。保存在$this->values数组的变量值用变量名称作为键值。最后，$this->values数组看上去像这样：

  1. Array
  2. (
  3. [font] => arial, sans-serif
  4. [main-color] => #3D7169
  5. [secondary-color] => #000
  6. )
变量应用

如果$var的值为空，则面对一个应用变量的问题。我们检查是否在变量值数组里存在该变量。如果存在，把替换变量替换为对应的值。

  1. } else if (isset($this->values[$varName])) {
  2. $line = preg_replace(‘///$’.$varName.‘(/W|/z)/’, $this->values[$varName].‘//1′, $line);
  3. }

替换过程看上去异常复杂。实际上不是这样，替换过程仅仅替换$variable如果它后面跟着一个非字符(/W)或行结束符(/z)。

最后，我们去除所有匹配的变量已使stylesheet干净和正确，最后返回处理后的内容。

  1. $line = str_replace($found, ”, $line);
  2. return $line;
  3. }
Display方法

该方法显示处理过的stylesheet。为了让浏览器识别CSS内容，把header设置为text/css content type.

  1. public function display() {
  2. header(‘Content-type: text/css’);
  3. echo $this->parse();
  4. }

第四步 – 缓存结果

到了这一点，所有事情都已很完美了。然而，当应用于大型网站时，该操作会很消耗CPU资源。

毕竟，当浏览器需要CSS文件的时候，我们不用每次都去处理它。只要第一次运行或CSS文件有修改时，生成一个缓存。

创建一个名为cache的目录。如有需要，执行chmod 777命令把该目录的权限设置为可写。现在我们的项目应该如下面所示：



Cache方法

加入一个新方法:

  • read the cache file if it exists.
  • create and store the rendered results.
  • update existing cache file if the CSS file has been modified.

所有逻辑按照下面方法处理：

  1. private function cache($content = false) {
  2. $cacheFile = “cache/”.urlencode($this->cssFile);
  3. if (file_exists($cacheFile) && filemtime($cacheFile) > filemtime($this->cssFile)) {
  4. return file_get_contents($cacheFile);
  5. } else if ($content) {
  6. file_put_contents($cacheFile, $content);
  7. }
  8. return $content;
  9. }

我们解释一下这段代码。缓存文件名称是通过之前保存在$this->cssFile属性里面的CSS文件名计算出来的。最后，要用到urlencode函数。

  1. $cacheFile = “cache/”.urlencode($this->cssFile);

我们需要检查是否缓存文件已经存在(file_exists)了。如果存在，继续检查缓存文件的创建时间是否比CSS文件的修改时间(filemtime)早。

  1. if (file_exists($cacheFile) && filemtime($cacheFile) > filemtime($this->cssFile)) {
  2. return file_get_contents($cacheFile);

否则，系统要新生成一个缓存文件。

  1. } else if ($content) {
  2. file_put_contents($cacheFile, $content);
  3. }

最后，要处理这个新方法。有两个方法需要做修改。

  1. private function parse() {
  2. if (!$content = $this->cache()) {
  3. $lines = file($this->cssFile);
  4. foreach($lines as $line) {
  5. $content .= $this->findAndReplaceVars($line);
  6. }
  7. }
  8. return $content;
  9. }

Parse方法现在在运行前要检查缓存。如果没有有效的缓存，CSS文件就要被处理，否则直接返回缓存的内容。

  1. public function display() {
  2. header(“Content-type: text/css”);
  3. echo $this->cache($this->parse());
  4. }

最后，display方法显示了正确的内容（新的或缓存的）。

浏览器缓存

出于安全原因（sessions，动态内容）浏览器不能把PHP脚本产生的结果缓存到它的缓存里去。一个真实的CSS文件可能被缓存但不是我们代码所产生的结果。我们不得不让浏览器去模拟真实CSS文件的行为。我们在构造函数里加入一些行。

  1. public function __construct($cssFile) {
  2. if (!file_exists($cssFile)) {
  3. header(‘HTTP/1.0 404 Not Found’);
  4. exit;
  5. }
  7. // Deals with the Browser cache
  8. $modified = filemtime($cssFile);
  9. header(‘Last-Modified: ’.gmdate(“D, d M Y H:i:s”, $modified).‘ GMT’);
  11. if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
  12. if (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $modified) {
  13. header(‘HTTP/1.1 304 Not Modified’);
  14. exit();
  15. }
  16. }
  18. $this->cssFile = $cssFile;
  19. }

我们把原CSS文件的最后修改时间复制到header。基本上在传递数据前，headers被浏览器和服务器之间交换。当浏览器在它的缓存里有一页拷贝，它会发送一个HTTP_IF_MODIFIED_SINCE请求给服务器，带着之前由header(’Last-Modified’, …)保存的缓存日期。如果日期相匹配，内容是新的不需要重载。因此我们发送一个304不需要修改的响应，退出脚本。

有个简单的方法，在文件里加header(’Cache-Control: max-age=3600′)。内容会被任意一个浏览器缓存一个小时（3600秒）。


结论

搞定！你现在可以在你的服务器上测试一下。例如：http://localhost/myproject/css/styles.css

  1. $font: arial, sans-serif;
  2. $main-color: #3D7169; $secondary-color: #000;
  4. h1 {
  5. font: 200% $font;
  6. color: $main-color;
  7. }
  8. p {
  9. background: $secondary-color;
  10. color: $main-color;
  11. font-family: $font;
  12. padding: 10px;
  13. }

变成为

  1. h1 {
  2. font: 200% arial, sans-serif;
  3. color: #3D7169;
  4. }
  5. p {
  6. background: #000;
  7. color: #3D7169;
  8. font-family: arial, sans-serif;
  9. padding: 10px;
  10. }

转自：http://blog.toeach.net/2009/03/19/how-to-add-variables-to-your-css-files/

wan1976
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
link标签和css引入方式
weixin_30599769的博客
02-13 1万+
link常见用途 <link> 标签最常见的用途是链接样式表，在 HTML 中，<link> 标签没有结束标签，此元素只能存在于 head 部分，不过它可出现任何次数。 <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> 使用...
build:加入并缩小 JS、CSS 文件
06-18
这些工具能够根据配置自动完成任务，如查找指定目录下的JS和CSS文件，合并它们，并通过插件如UglifyJS（用于JS）和Clean CSS（用于CSS）进行压缩。 例如，在Webpack配置中，你可以使用`mini-css-extract-plugin`来...
原生css加变量
文龙刚的博客
12-19 127
原生css加变量
html中加入变量吗,css中可以有变量吗？
weixin_39807859的博客
06-03 524
2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。css中可以使用变量。声明css变量的时候，变量名前面要加两根连词线(--)。变量名大小写敏感，--header-color和--Header-Color是两个不同变量。var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这...
css变量使用
最新发布
weixin_43390711的博客
05-21 523
在根元素（:root）中定义，以便全局使用:root {
CSS中参数的使用
暖阳的进步乐园
05-08 897
margin： （1）一个参数值，将用于全部的四边。 （2）两个参数值，第一个用于上－下，第二个用于左－右。 （3）三个参数值，第一个用于上，第二个用于左－右，第三个用于下。 （4）四个参数值，将按上－右－下－左的顺序作用于四边。
LESS 让css也支持变量，运算符，include,嵌套规则等等
01-19
使用less，css文件的后缀名需要改为.less。 3. 在html页面中加入下面代码 <!– style.less文件就是样式表文件，并且style.less必须放在less-1.0.22.min.js文件前加载，原理后面介绍 –> <link rel=stylesheet...
cssRefresh:CSSrefresh - 自动刷新 CSS 文件
06-11
css刷新 基于 添加了一个名为持续时间的变量来控制 CSS 重新加载持续时间 所有带有 rel="autoload" 的标签只会被重新加载 在您的网页中包含脚本：<script type="text/javascript" src=
CSS Less框架基础教程
12-13
LESS 源文件的引入方式与标准CSS文件的引入方式一样： 复制代码代码如下:<link rel=”stylesheet/less” type=”text/css” href=”styles.less”> 在我们需要引入 LESS 源文件的 HTML 中加入如下
HTML+css学习优化3
12-18
在"HTML+css学习优化3"中，我们可能还会涉及CSS预处理器，如Sass和Less，它们允许编写更模块化、可维护的CSS代码，支持变量、嵌套规则、混合等功能。同时，学习使用CSS框架（如Bootstrap或Foundation）可以快速构建...
css url使用变量_使用CSS优化打印链接—显示URL
culuo8053的博客
07-25 649
When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, ...
el 能否定义作用域变量_js之三种定义变量的方式及区别
weixin_39629876的博客
11-25 194
const定义网上好多人都说const定义的变量不可以修改，其实这种说法超级超级不严谨！const应该这样说： const定义的变量指向的那个内存地址不得改动。解释：对于简单数据类型来说，const定义的变量就是不可改变的，因为我们定义简单类型变量的本质是给它分配一份内存空间，然后简单类型的值就保存在那里！而对于引用类型的数据，变量保存的实际上是一个指针，这个指针指向的是那个实际数据，使用cons...
CSS 变量使用
m0_73461567的博客
01-10 365
CSS变量 使用
css变量在页面中的使用，实现页面变量赋值给css中
weixin_45890414的博客
09-30 558
// '--hoverColor'这个是css中var声明的变量，页面直接给其赋值就可以 <el-table :data="tableList" row-key="id" border default-expand-all :row-style="{ backgroundColor: themeData[theme].table.body.backgroundColor }"
后台管理遇到的坑一、style中css样式怎么传入变量值
weixin_30497527的博客
09-04 924
第一、给标签定义style变量 第二、在data中定义 第三、在methods中的方法中给样式赋值 转载于:https://www.cnblogs.com/qdwz/p/11457536.html
VUE项目中index.html中引入CSS文件小知识点
御前提笔小书童
06-24 3732
asdfasfdadfaf
【CSS】CSS使用变量与变量定义
少莫千华
07-03 2996
当使用CSS变量时，可以在任何属性的值中引用它们。:root {:root是CSS中的一个伪类，表示文档的根元素。在HTML文档中，根元素通常是元素。使用:root伪类来定义CSS变量时，可以确保变量在整个文档中都是有效的，并且可以被其他选择器引用和使用。在示例中的代码块中，:root伪类用于定义变量和。这意味着这些变量可在整个文档中被引用，并且可以适用于任何元素或选择器。在.header类选择器中，属性的值使用了，这意味着背景颜色将根据变量的值来渲染。.button。
vue中css使用data中的变量
hello world
12-04 8282
封装一个ui组件，组件的样式一般是多种多样的 我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的 (vue3中已经可以直接获取，可以去学习一下) 通过vars 那么在vue2中，我们要借助setProperty函数 写一个简单的例子 <template> <div class="home" ref="UI"> <div class="header">hello world.
uniapp scss定义全局变量
08-16
接下来，你需要在App.vue文件中的style标签中添加lang="scss"属性，并在第一行引入uview-ui的index.scss文件以及其他需要的公共css文件，如base.css、common.scss和iconfont.css。可以使用以下代码： ```vue /* ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值