搜索
首页后端开发php教程如何将嵌套的PHP数组转换为CSS规则?(代码示例)

应用程序的许多方面都可以自动化,例我们可以使用某些PHP代码(如使用数组)来生成样式表。那么如何实现?下面本篇文章就来带大家了解一下如何将嵌套的PHP数组转换为CSS规则,并以字符串的形式显示,希望对大家有所帮助。

如何将嵌套的PHP数组转换为CSS规则?(代码示例)

下面我们就来看看将嵌套的关联数组转换为CSS字符的方法。

1、编写关联数组转换为css字符串的函数

要在PHP中将数组转换为CSS字符串(在SASS或LESS的情况下使用规则或简单变量),我们将使用以下函数:

<?php
/**
 * @param array $rules
 *   CSS规则的数组形式为:
 *   array(&#39;selector&#39;=>array(&#39;property&#39; => &#39;value&#39;)). 
 *   还支持选择器
 *   嵌套示例:
 *   array(&#39;selector&#39; => array(&#39;selector&#39;=>array(&#39;property&#39; => &#39;value&#39;))).
 *
 * @return 字符串一个CSS规则字符串。它不包含在<style>标签中。
 */
function css_array_to_css($rules, $indent = 0) {
    $css = &#39;&#39;;
    $prefix = str_repeat(&#39;  &#39;, $indent);
    foreach ($rules as $key => $value) {
        if (is_array($value)) {
            $selector = $key;
            $properties = $value;
            $css .= $prefix . "$selector {\n";
            $css .= $prefix . css_array_to_css($properties, $indent + 1);
            $css .= $prefix . "}\n";
        } else {
            $property = $key;
            $css .= $prefix . "$property: $value;\n";
        }
    }
    return $css;
}
//调用css_array_to_css()函数转换
//code
?>

说明:该函数基本上期望作为第一个参数包含CSS的规则或简单属性的数组,其中不是数组的每个key =>value;都将表示为key : value;,如果键的值是数组,则规则为css将被引入。

2、使用函数

正如上述函数说明中所提到的,它从具有指定规则的数组中返回一个CSS字符串。只要数组的结构有效,该函数就可以正常用于纯CSS规则,媒体查询,SASS和LESS。例如:

● 转换为CSS:

在 css_array_to_css()函数后添加以下代码:

$stylesheet = array(
    "body" => array(
        "margin" => "0",
        "font-size" => "1rem",
        "font-weight" => 400,
        "line-height" => 1.5,
        "color" => "#212529",
        "text-align" => "left",
        "background-color" => "#fff"
    ),
    ".form-control" => array(
        "display" => "block",
        "width" => "100%!important",
        "font-size" => "1em",
        "background-color" => "#fff",
        "border-radius" => ".25rem"
    )
);
echo(css_array_to_css($stylesheet));

上一个代码段将输出以下CSS规则:

body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
.form-control {
  display: block;
  width: 100%!important;
  font-size: 1em;
  background-color: #fff;
  border-radius: .25rem;
}

● 转换为SASS / SCSS:

由于递归实现,将能够在规则中嵌套多个规则,这允许我们为SASS生成有效的语法:

$sass = array(
    "nav" => array(
        "ul" => array(
            "margin" => 0,
            "padding" => 0,
            "list-style" => "none"
        ),
        "li" => array(
            "display" => "inline-block"
        ),
        "a" => array(
            "display" => "block",
            "padding" => "6px 12px",
            "text-decoration" => "none"
        )
    )
);
echo css_array_to_css($sass);

上一个代码段将输出以下SASS代码:

nav {
  ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  li {
      display: inline-block;
  }
  a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
  }
}

● 转换为LESS:

与SASS的工作方式相同,我们也可以使用LESS编写复杂的规则:

$less = array(
    "@nice-blue" => "#5B83AD",
    "@light-blue" => "@nice-blue + #111",
    "#header" => array(
        "color" => "@light-blue"
    ),
    ".component" => array(
        "width" => "300px",
        "@media (min-width: 768px)" => array(
            "width" => "600px",
            "@media (min-resolution: 192dpi)" => array(
                "background-image" => "url(/img/retina2x.png)"
            )
        ),
        "@media (min-width: 1280px)" => array(
            "width" => "800px"
        )
    )
);
echo css_array_to_css($less);

上一个代码段将输出以下LESS代码:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media (min-resolution: 192dpi) {
          background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
      width: 800px;
  }
}

相关视频教程推荐:《PHP教程

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

以上是如何将嵌套的PHP数组转换为CSS规则?(代码示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
php怎么对多维数组的某一列求和php怎么对多维数组的某一列求和May 09, 2022 pm 05:55 PM

求和方法:1、用array_column()获取多维数组中指定一列的全部元素,语法“rray_column(数组, '指定列名')”,会返回一个包含全部元素的结果数组;2、用“array_sum(结果数组)”计算结果数组中所有元素的和即可。

php怎么在二维数组末尾增加元素php怎么在二维数组末尾增加元素Apr 26, 2022 pm 06:29 PM

增加元素的方法:1、使用array_push()函数,语法“array_push(二维数组,值1,值2...);”;2、使用array_splice()函数,语法“array_splice(二维数组,count(二维数组),0,元素值)”。

php怎么获取数值在数组中的哪个位置php怎么获取数值在数组中的哪个位置May 07, 2022 pm 09:03 PM

获取方法:1、用“array_values(数组)”将指定数组转为索引数组;2、用“array_search(数值,索引数组)”,在索引数组中搜索数值,返回对应的索引值(下标);3、用“索引值+1”语句获取元素在数组中的位置值。

php数组里面可放数组吗php数组里面可放数组吗May 10, 2022 pm 01:48 PM

php数组里面可以放数组。PHP数组可以存储所有类型的数据,当然也包括数组本身;如果一个数组中的元素是另一个数组,就构成了包含数组的数组,即多维度数组。数组的不同维度标志着需用几个下标(索引)来获取对应的数组元素,比如二维数组需用两个下标。

php数组怎么去掉null值php数组怎么去掉null值May 07, 2022 pm 08:35 PM

方法:1、循环遍历数组,语法“foreach($arr as $k=>$v){}”;2、循环体中,用“==”判断元素值是否为null,如果是则用unset()删除该元素,语法“if($v==null){unset($arr[$k]);}”。

php中只比较值的数组交集函数是什么php中只比较值的数组交集函数是什么Apr 29, 2022 pm 02:41 PM

php中只比较值的数组交集函数是“array_intersect()”;该函数用于比较两个(或更多个)数组的键值,语法“array_intersect(数组1,数组2...)”,会返回一个交集数组,所包含的值是从被比较的数组(数组1)中取。

php数组怎么去掉最大和最小元素php数组怎么去掉最大和最小元素May 09, 2022 pm 08:47 PM

去掉方法:1、用“sort($arr)”对数组进行升序排序,排序后该数组的第一个元素就是最小值,最后一个元素就是最大值;2、用“array_pop($arr)”删除最后一个元素,用“array_shift($arr)”删除第一个元素即可。

php数组怎么去掉最大值和最小值后求平均php数组怎么去掉最大值和最小值后求平均May 10, 2022 pm 02:33 PM

方法:1、对数组进行升序排序,并用“array_pop(数组)”和“array_shift(数组)”去除最大值和最小值;2、用“count(数组)”和“array_sum(数组)”获取数组长度与元素和;3、用“元素和/数组长度”计算平均数。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)