ネストされた 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 ルールまたは単純なプロパティを含む配列を最初の引数として期待します。 Each key = > value; は key : value; で表され、key の値が配列の場合は 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 = 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;
  }
}

# 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 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！

以上がネストされた PHP 配列を CSS ルールに変換するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。