Aprende a convertir una matriz a una regla de CSS, LESS o SASS en formato de cadena de texto.

Cómo convertir una matriz PHP anidada en una regla CSS, SASS, LESS (como cadena de texto)

Se pueden automatizar muchos aspectos de una aplicación, por ejemplo, la generación de hojas de estilo. Como desarrollador de backend, no se equivocaría con las hojas de estilo directamente con los archivos, sino que generarlas con algo de código PHP, por ejemplo, usando matrices, es la mejor opción.

En este artículo, le mostraremos cómo generar una cadena CSS a partir de una matriz asociativa fácilmente.

1. Función para convertir una matriz asociativa en una cadena css

Para convertir una matriz a una cadena CSS (con reglas o variables simples en el caso de SASS o LESS) en PHP, usaremos la siguiente función:

<?php
/**
 * Función recursiva que genera a partir de una matriz multidimensional de reglas CSS, una cadena CSS válida.
 *
 * @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 Una cadena de reglas CSS. Esto no está envuelto en etiquetas <style>.
 * @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;
}

La función, básicamente espera como primer argumento una matriz que contiene reglas o propiedades simples de CSS, donde cada valor clave => que no es una matriz se expresará como key : value;, si el valor de la clave es una matriz, una regla de Se introducirá css, asumiendo que contiene más propiedades css y así sucesivamente ya que la función es recursiva.

Esta función no pertenece a Our Code World sino al artículo original de Grasmash (Matthew Grasmick) .

2. Uso

Como se menciona en la explicación de la función, devuelve una cadena CSS de una matriz con las reglas especificadas. La función funciona correctamente para reglas CSS simples, consultas de medios, SASS y LESS siempre que la estructura de la matriz sea válida. Por ejemplo:

CSS

Para generar reglas CSS básicas, simplemente declare una matriz donde cada clave es un selector de clase y su valor es una matriz con las reglas:

<?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);

El fragmento anterior generaría las siguientes reglas 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

Gracias a la implementación recursiva, podrá anidar múltiples reglas dentro de una regla, lo que le permite generar una sintaxis válida para SASS también:

<?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);

El fragmento anterior generaría el siguiente código SASS:

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

LESS

De la misma manera que funciona SASS, también podrá escribir incluso reglas complejas con 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);

El fragmento anterior generaría el siguiente código 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;
  }
}

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores