중첩된 PHP 배열을 CSS 규칙으로 변환하는 방법은 무엇입니까? (코드 예)

애플리케이션의 다양한 측면을 자동화할 수 있습니다. 예를 들어 일부 PHP 코드(예: 배열 사용)를 사용하여 스타일시트를 생성할 수 있습니다. 그렇다면 그것을 달성하는 방법은 무엇입니까? 다음 기사에서는 중첩된 PHP 배열을 CSS 규칙으로 변환하고 이를 문자열 형식으로 표시하는 방법을 보여줍니다. 도움이 되기를 바랍니다.

중첩된 연관 배열을 CSS 문자로 변환하는 방법을 살펴보겠습니다.

1 연관 배열을 CSS 문자열로 변환하는 함수 작성

PHP에서 배열을 CSS 문자열로 변환하려면(SASS 또는 LESS의 경우 규칙 또는 단순 변수 사용) 다음 함수를 사용합니다.

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

설명: 이 함수는 기본적으로 CSS의 규칙이나 간단한 속성을 포함하는 배열을 첫 번째 인수로 기대합니다. 여기서 배열이 아닌 모든 키 => 값은 키가 배열인 경우 키: 값으로 표시됩니다. 그런 다음 CSS 규칙이 소개됩니다.

2. 함수 사용

위 함수 설명에서 언급했듯이 지정된 규칙에 따라 배열에서 CSS 문자열을 반환합니다. 이 함수는 배열 구조가 유효한 한 순수 CSS 규칙, 미디어 쿼리, SASS 및 LESS에서 잘 작동합니다. 예:

● CSS로 변환:

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

이전 코드 조각은 다음 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에 대한 효율적인 구문을 생성할 수 있습니다.

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

이전 코드 조각은 다음 SASS 코드를 출력합니다.

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

● 변환 중 to LESS:

SASS 작동과 동일한 방식으로 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);

이전 코드 세그먼트는 다음 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;
  }
}

권장 관련 비디오 튜토리얼: "PHP 튜토리얼 "

이 글은 여기까지입니다. 글 전체 내용이 모든 분들의 공부에 도움이 되기를 바랍니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !

위 내용은 중첩된 PHP 배열을 CSS 규칙으로 변환하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!