2013-04-13 3 views
3

오케이 - 배열로 설정하려는 동적 CSS 스타일 시트를 만들고 있습니다.PHP foreach를 사용하여 스타일 시트 만들기

먼저 PHP 전문가가 아니라고 말씀 드리지만 주위를 둘러 보았습니다.

여기 내 기본 배열이 있습니다.

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

그래서 선택자와 값이있는 두 개의 속성이 있습니다.

이제 스타일 시트를 만들고 싶지만 PHP 지식이 부족하여 문제가 발생합니다. 나는, 그래서 기본적으로

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

:

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

이 원하는 결과입니다

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

지금 나는 그것이 출력하는 스타일 시트에 다음의로이 코드가 정확하지 알고 그 뒤에 숫자가 증가하는 속성과 값을 무제한으로 만들 수 있고 코드가 그것을 쓸 수 있기를 원합니다.

아무도 도와 줄 수 있습니까?

감사합니다.

답변

8

그래서 내 접근 방식은 평면 배열 대신 다차원 배열을 사용하여 하위 배열의 선택기 속성을 중첩합니다. 이렇게하면 첫 번째 레이어를 반복 한 다음 각 상위 항목의 하위 항목을 살펴보고 각 속성/값 쌍에 대해 CSS를 작성함으로써 접근 방법이 훨씬 간결 해집니다. 또한 키의 값을 검사하여 현재 어떤 쌍이 있는지 찾아야하는 것과는 대조적으로 반복이 쉬워집니다. 다른 출력 형식이 필요하면 반복 코드는 결정 수 있으며,이 코드 조각에 두 번 같은 배열을 통해 반복하는 당신의 예에서 구조

$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

그냥 몇 가지 덧글을 추가 :) 솔직히 나는 내가 가진 줄 알았지 만, 나는 내 머리에서 생각하고 있다고 가정 하하. – 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