変数をLESS.jsスタイルシートに渡す

私はデータベースに定義されたいくつかの変数(16進数の色)を持っています。私はこれらの変数をMySQL経由でPHP経由でLESS.jsスタイルシートに渡す必要があります。可能?

そうでない場合は、何か似たようなやり方をするアドバイスはありますか?明るい変数と暗い変数が重要です。

5
今すぐクライアント側を設定してください。私は何かのようなものを探しています:href = "styles.less&var = FFF"
追加された 著者 Chords,
興味深い、ありがとう、私はそのおもちゃをします。
追加された 著者 Chords,
どのようにあなたのLESSをCSSに変換していますか?
追加された 著者 Andrew Marshall,
まあ、あなたがそれを集めてしまえば、何らかの変数があったという考えは消えてしまったのです。あなたはそれが確かに可能であるよりも、私はすぐにどのように確信していないが、サーバー側でそれをやっている場合。私が考えることができる最も良いことは、PHPにこれらの変数を持つLESSスタイルシートを生成させ、次にそれを他のものと一緒にコンパイルすることです。
追加された 著者 Andrew Marshall,

2 答え

私の頭に浮かぶ最も良いアプローチは、PHPを使ってLESSファイルを動的に生成することです(あなたのvarsを含む)。

1 \ HTMLページに新しいスタイルシートを含める必要があります。

<link rel='stylesheet/less' href='css/style.php' />

2 \ style.php にPHP varsを次のように含めます:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

@brand_color_1 = <?php echo $brand_color_1; ?>;
/* Add all other vars do you need. */

3 \次に、この style.php の一番下(またはLESS var宣言の後)に、必要なすべてのインポートを次のように追加します。

<?php
  header("Content-type: text/css; charset: UTF-8");

  @brand_color_1 = <?php echo $brand_color_1; ?>;
  /* Add all other vars do you need. */

  @import "style.less";
?>

これは時計のように動作します。

で書かれた PHPでCSS変数を読むことができる記事がありますhref = "http://twitter.com/chriscoyier" rel = "noreferrer"> Chris Coyier


クライアント側でlessファイルをコンパイルする別の推奨されない方法は、手動でコンパイルしてPHP varsを渡すことができます。

<script type="text/javascript">
var colors = '';
colors += '@brand_color_1: <?php echo $brand_color_1 ?>;'
colors += '@brand_color_2: <?php echo $brand_color_2 ?>;'
colors += '@import "style.less"';
// Add other imports.
var parser = new (less.Parser)();
parser.parse(colors, function(err, tree) { 
  var CSS = tree.toCSS();
 //Add it to the DOM maybe via jQuery
});
</script>
5
追加された
"3 \"に問題があり、最後の?> は置かれていません!
追加された 著者 DUzun,

CSS:

#header {
    color:black;
    border:1px solid #dd44dd;
}

#header .navigation {
    font-size:12px;
}

#header .navigation a {
    border-bottom:1px solid green; 
}

#header .logo {
    width:300px;
}

#header .logo:hover {
    text-decoration:none;
}

もっと少なく:

#header {
    color:black;
    border:1px solid #dd44dd;
    .navigation {
        font-size:12px; a {
            border-bottom:1px solid green;
        }
    }
.logo 
1
追加された
Stack Exchangeのすべてのコンテンツは CC-by-SA です。これらの条件に同意しない場合は、Stack Exchangeはあなたの貢献に対して有効なアウトレットではありません。
追加された 著者 Makoto,
PHP - 日本のコミュニティ [ja]
PHP - 日本のコミュニティ [ja]
4 参加者の

このグループではPHPについて話します。 パートナー:kotaeta.com

JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript