Как преобразовать вложенный массив PHP в правило CSS, SASS, LESS (строка)

Содержание

1 1. Функция для преобразования ассоциативного массива в строку CSS
2 2. Использование

Многие аспекты приложения могут быть автоматизированы, например, создание таблиц стилей. Как бэкэнд-разработчик, вы не будете путать таблицы стилей напрямую с файлами, но вместо этого лучше всего будет генерировать их с помощью некоторого кода PHP, например, с использованием массивов.

В этой статье мы покажем вам, как легко сгенерировать строку CSS из ассоциативного массива.

1. Функция для преобразования ассоциативного массива в строку CSS

Чтобы преобразовать массив в строку CSS (с правилами или простыми переменными в случае SASS или LESS) в PHP, мы будем использовать следующую функцию:

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  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 =>, которое не является массивом, будет выражаться как key : value;, если значение ключа является массивом, будет введено правило css, при условии, что оно содержит больше свойств css и т. д., поскольку функция является рекурсивной.

Эта функция принадлежит не нашему миру кода, а оригинальной статье Грасмаш (Мэтью Грасмик).

2. Использование

Как упоминалось в объяснении функции, она возвращает строку CSS из массива с указанными правилами. Функция работает корректно для простых правил CSS, медиазапросов, SASS и LESS, пока структура массива верна. Например:

CSS

Чтобы сгенерировать основные правила CSS, просто объявите массив, в котором каждый ключ является селектором класса, а его значение — массивом с правилами:

 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:

 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:

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