欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > PHP >

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

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

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

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

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

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

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

<?php
/**
 * @param array $rules
 *   CSS规则的数组形式为:
 *   array('selector'=>array('property' => 'value')). 
 *   还支持选择器
 *   嵌套示例:
 *   array('selector' => array('selector'=>array('property' => 'value'))).
 *
 * @return 字符串一个CSS规则字符串。它不包含在<style>标签中。
 */
function Css_array_to_Css($rules, $indent = 0) {
    $Css = '';
    $prefix = str_repeat('  ', $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教程

本文地址:http://itbyc.com/php/20261.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1