如何将嵌套的PHP数组转换为CSS，SASS，LESS规则(字符串)

本文概述

• 1.将关联数组转换为css字符串的函数
• 2.用法

应用程序的许多方面可以自动化, 例如样式表的生成。作为后端开发人员, 你不会直接将样式表与文件搞混, 而是最好使用一些PHP代码(例如, 使用数组)生成样式表。

在本文中, 我们将向你展示如何轻松地从关联数组生成CSS字符串。

1.将关联数组转换为css字符串的函数

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

<?php
/**
 * Recursive function that generates from a a multidimensional array of CSS rules, a valid CSS string.
 *
 * @param array $rules
 *   An array of CSS rules in the form of:
 *   array('selector'=>array('property' => 'value')). Also supports selector
 *   nesting, e.g., *   array('selector' => array('selector'=>array('property' => 'value'))).
 *
 * @return string A CSS string of rules. This is not wrapped in <style> tags.
 * @source http://matthewgrasmick.com/article/convert-nested-php-array-css-string
 */
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简单属性的数组作为第一个参数, 其中每个非数组的key => value将表示为key：value;(如果key的值是一个数组) , 假设该函数包含更多css属性, 则将引入css规则, 以此类推, 因为该函数是递归的。

此功能不属于Our Code World, 而是属于Grasmash的原始文章(Matthew Grasmick)。

2.用法

如功能说明中所述, 它从具有指定规则的数组中返回CSS字符串。只要数组的结构有效, 该函数就可以对普通CSS规则, 媒体查询, SASS和LESS正常工作。例如：

的CSS

要生成基本的CSS规则, 只需声明一个数组, 其中每个键是一个类选择器, 并且其值是包含规则的数组：

<?php 

$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生成有效的语法：

<?php 

$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;
  }
}

减

以与SASS相同的方式, 你还可以使用LESS编写甚至复杂的规则：

<?php 

$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;
  }
}

编码愉快！