Comment convertir des tableaux PHP imbriqués en règles CSS ? (exemple de code)

De nombreux aspects de l'application peuvent être automatisés, par exemple nous pouvons utiliser du code PHP (comme l'utilisation de tableaux) pour générer des feuilles de style. Alors comment y parvenir ? L'article suivant vous montrera comment convertir des tableaux PHP imbriqués en règles CSS et les afficher sous forme de chaînes. J'espère que cela vous sera utile.

Voyons comment convertir des tableaux associatifs imbriqués en caractères CSS.

1. Écrire une fonction pour convertir un tableau associatif en chaîne CSS

Pour convertir un tableau en chaîne CSS en PHP (en Cas SASS ou LESS utilisant des règles ou des variables simples), nous utiliserons la fonction suivante :

<?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 : Cette fonction attend essentiellement comme premier paramètre un tableau contenant des règles CSS ou des propriétés simples, où Every key => value; qui n'est pas un tableau sera représenté comme key : value;, et si la valeur de la clé est un tableau, la règle pour CSS sera introduite.

2. Utilisez la fonction

Comme mentionné dans la description de la fonction ci-dessus, elle renvoie un caractère CSS à partir d'un tableau avec une chaîne de règles spécifiée. Cette fonction fonctionne bien avec les règles CSS pures, les requêtes multimédias, SASS et LESS tant que la structure du tableau est valide. Par exemple :

● Convertir en CSS :

Ajoutez le code suivant après la fonction 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));

L'extrait de code précédent seront affichés Les règles CSS suivantes :

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

● Converties en SASS/SCSS :

En raison de l'implémentation récursive, il sera possible d'imbriquer plusieurs règles dans une règle, ce qui nous permet de générer une syntaxe valide pour 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);

L'extrait précédent affichera le code SASS suivant :

nav {
  ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  li {
      display: inline-block;
  }
  a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
  }
}

● Convertir en LESS :

De la même manière que fonctionne SASS, nous pouvons également écrire des règles complexes en utilisant 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);

L'extrait de code précédent affichera le code LESS suivant :

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

Tutoriel vidéo associé Recommandé : "Tutoriel PHP"

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!