Many aspects of the application can be automated, for example we can use some PHP code (such as using arrays) to generate style sheets. So how to achieve it? The following article will show you how to convert nested PHP arrays into CSS rules and display them in the form of strings. I hope it will be helpful to you.
Let’s take a look at how to convert nested associative arrays into CSS characters.
1. Write a function to convert an associative array into a CSS string
To convert an array into a CSS string in PHP (in SASS or LESS case using rules or simple variables) we will use the following function:
<?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 ?>
Description: This function basically expects as first argument an array containing CSS rules or simple properties, which is not an array Each key => value; will be represented as key : value;, and if the value of the key is an array, the rule for css will be introduced.
2. Use the function
As mentioned in the above function description, it returns a CSS character from an array with specified rules string. This function works fine with pure CSS rules, media queries, SASS and LESS as long as the structure of the array is valid. For example:
● Convert to CSS:
Add the following code after the css_array_to_css() function:
$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));
The previous code snippet will output the following CSS Rules:
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; }
● Conversion to SASS/SCSS:
Due to the recursive implementation, it will be possible to nest multiple rules within a rule, which allows us to generate valid Syntax:
$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);
The previous snippet will output the following SASS code:
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
● Convert to LESS:
Works the same as SASS , we can also use LESS to write complex rules:
$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);
The previous code segment will output the following LESS code:
@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; } }
Related video tutorial recommendations: "PHP Tutorial"
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to convert nested PHP arrays to CSS rules? (code example). For more information, please follow other related articles on the PHP Chinese website!

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

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

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

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

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

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version
Recommended: Win version, supports code prompts!

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
