애플리케이션의 다양한 측면을 자동화할 수 있습니다. 예를 들어 일부 PHP 코드(예: 배열 사용)를 사용하여 스타일시트를 생성할 수 있습니다. 그렇다면 그것을 달성하는 방법은 무엇입니까? 다음 기사에서는 중첩된 PHP 배열을 CSS 규칙으로 변환하고 이를 문자열 형식으로 표시하는 방법을 보여줍니다. 도움이 되기를 바랍니다.
중첩된 연관 배열을 CSS 문자로 변환하는 방법을 살펴보겠습니다.
1 연관 배열을 CSS 문자열로 변환하는 함수 작성
PHP에서 배열을 CSS 문자열로 변환하려면(SASS 또는 LESS의 경우 규칙 또는 단순 변수 사용) 다음 함수를 사용합니다.
<?php /** * @param array $rules * CSS规则的数组形式为: * array('selector'=>array('property' => 'value')). * 还支持选择器 * 嵌套示例: * array('selector' => array('selector'=>array('property' => 'value'))). * * @return 字符串一个CSS规则字符串。它不包含在<style>标签中。 */ 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_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 중국어 웹사이트의 기타 관련 기사를 참조하세요!