search
HomeBackend DevelopmentPHP TutorialHow to convert nested PHP arrays to CSS rules? (code example)

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.

How to convert nested PHP arrays to CSS rules? (code example)

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(&#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
?>

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

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

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)