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

本文概述

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

应用程序的许多方面可以自动化, 例如样式表的生成。作为后端开发人员, 你不会直接将样式表与文件搞混, 而是最好使用一些PHP代码(例如, 使用数组)生成样式表。
在本文中, 我们将向你展示如何轻松地从关联数组生成CSS字符串。
1.将关联数组转换为css字符串的函数【如何将嵌套的PHP数组转换为CSS，SASS，LESS规则(字符串)】要将数组转换为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; }}

编码愉快！