2013-04-13 6 views
3

Хорошо - поэтому я создаю динамическую таблицу стилей CSS, которую я хочу настроить с помощью массива.Использование PHP foreach для построения таблицы стилей

Прежде всего позвольте мне сказать, что я не эксперт по PHP, но я немного знаю, как это сделать.

Вот мой очень простой массив.

$visual_css = array (
    array(
     "selector" => "body", 
     "property" => "background", 
     "value"  => "#FFF", 
     "property2" => "color", 
     "value2" => "#000", 
     "type"  => "css" 
    ) 
); 

Таким образом, у нас есть селектор и два свойства со значениями.

Теперь я хочу создать таблицу стилей, но я столкнулся с проблемами из-за отсутствия знаний PHP.

foreach ($visual_css as $value) { 
    switch ($value['type']) { 
     case "css": 

      // Open selector 
      echo (!empty($value['selector']) ? $value['selector'] . '{' : null); 

      foreach ($value as $key => $item) { 
       foreach ($value as $key2 => $item2) { 
        //Match only the id's against the key 
        if (preg_match('/^property/i', $key) && preg_match('/^value/i', $key2)) { 
         // First property 
         echo (!empty($item) ? $item . ':' : null); 
          echo (!empty($item2) ? $item2 . ';' : null); 
        } 
       } 

      } 

      // Close selector 
      echo (!empty($value['selector']) ? '}' : null); 

     break; 
    } 
} 

Теперь я знаю, что этот код не является правильным, так как это выводит следующие данные в таблице стилей:

body{background:#FFF;background:#000;color:#FFF;color:#000;} 

Это желаемый результат:

body{background:#FFF;color:#000;} 

Так в принципе, я хотите иметь возможность создавать неограниченное количество свойств и значений с добавочным числом после них, а также записать код.

Может ли кто-нибудь мне помочь?

Спасибо!

ответ

8

Таким образом, мой подход использует многомерный массив вместо плоского массива для определения свойств селекторов в под-массивах. Таким образом, ваш подход намного более сжат, сначала перейдя через первый уровень, а затем перейдя через дочерние элементы каждого родителя и составив CSS для каждой пары свойств/значений. Это также делает итерацию cinch, а не проверять значения ключей, чтобы определить, на какую пару вы находитесь. Если вам нужен другой формат, код итерации может решить, что, и это должно быть оставлено из структуры

$visual_css = array (
    'body' => array(
     'background' => '#FFF', 
     'color'   => '#000' 
    ) 
); 

$output = ''; 
foreach($visual_css as $k => $properties) { 
    if(!count($properties)) 
     continue; 

    $temporary_output = $k . ' {'; 

    $elements_added = 0; 

    foreach($properties as $p => $v) { 
     if(empty($v)) 
      continue; 

     $elements_added++; 

     $temporary_output .= $p . ': ' . $v . '; '; 
    } 

    $temporary_output .= "}\n"; 

    if($elements_added > 0) 
     $output .= $temporary_output; 
} 

echo $output; 
// body {background: #FFF; color: #000; } 
+0

+1 для ответа, но вы должны объяснить, что вы здесь сделали. –

+0

Просто добавил несколько комментариев :) Честно говоря, я думал, что у меня есть, но я полагаю, что я просто думал в своей голове. Haha – Bryan

+0

Ничего себе, это было быстро. Большое спасибо за упрощение! Возможно ли также только выписать css, если установлено хотя бы одно из значений в массиве? Поэтому, если ни фон, ни цвет не имеют значения, css для этого элемента не создается, но если фон имеет значение и цвет, то не создается css, а только с этим свойством и значением? Благодаря!! – thomasusborne

1

В вашем примере вы обхвата за тот же массив в два раза, в этом фрагменте кода:

foreach ($value as $key => $item) { 
    foreach ($value as $key2 => $item2) { 

Если вы структурировали свои данные более логичным способом, вы также можете создать более чистый код цикла. Я хотел бы предложить вам структурировать массив с каждым свойством & значение в качестве отдельной подрешетки, например:

$visual_css = array(
    array(
     'selector' => 'body', 
     'properties' => array(
      'background' => '#fff', 
      'color' => '#000' 
     ) 
    ) 
    // ... etc ... 
); 

И тогда вы можете легко перебрать это так:

foreach ($visual_css as $selector) 
{ 
    echo $selector['selector'].' { '; 
    foreach ($selector['properties'] as $name => $value) 
    { 
     echo $name.': '.$value.'; '; 
    } 
    echo ' } '; 
} 
+1

Спасибо, что объяснил, что я сделал не так, и показал лучший способ сделать это. Я очень ценю время и силы! Благодаря! :) – thomasusborne