動的CSS？

私はこの瞬間を長い間待っていましたが、正直なところ、サブ皮質のどこかで、同じようなスタイルを2回書き換えずにCSSで書くのに便利なことを本当に望んでいました。自分のコードの必要なセクションを探すことなく、一般的に、CSSを許可したかったのです作業は簡単で簡単でした。ドラッグしたものです...そして、xCSSに会いました-動的CSSを操作するためのphpクラスです。

私は事前にレイアウトをお;びします; Habrと何かが今回うまくいかなかった（

上で書いたように、 xCSSは動的CSSを扱うためのクラスです。 OO CSSとSASS （はい、Rubyには既にそのようなものがあります）のアイデアに触発され、彼はCSSを動的に操作できるクラスを作成しました：開発者は変数、クラス、ネストされたセレクター、およびプロトタイプを利用できます。

xCSSは最初のレビューで何を提供しますか？ 第一に、ネストされたセレクターの助けを借りてコードの混乱を避けるのに役立ちます。第二に、いくつかの値を変更する必要がある場合、スタイルシート全体を編集する必要がなくなります。第三に、重複したルールを排除することでコードの量を減らします。コードを最小化します。 顔に加えて、xCSSをよりよく理解しましょう。

変数

私は最初にこのイノベーションについて書きたいと思います、私たちは皆、レイアウトの色を変更する必要がある状況に直面していることが多く、すべてがほぼ準備ができており、色はどこでもではなく特定の要素のみまたは前に変更する必要があるため、検索と置換は適切ではありません本番環境に引き渡すには、すべてのデバッグルールをクリアする必要があり、それらの多くは... すぐに何かを変更する必要がある状況をリストしたくないので、必要な場所は変更されますが、不要な場所は変更されません。

これで変数を使用できます：

 vars { $path_ = /images/icons; $basicColor_ = #ffcc00; $headerFonts_ = Arial, Tahoma, Verdana } #downloads { list-style-image: url('$path_/folder.png'); border-left: $basicColor_; } h1 { color: $basicColor_; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、変数の最後に下線を付けています。これは、宣言されていない変数が共通のプレフィックスを持つ変数に置き換えられないようにするために必要です。 上記を説明します： $newColor = #ffcc00



、および$newColorBg



宣言されていませんが、コードで使用されています。 #ffcc00Bg



結果として#ffcc00Bg



$newColorBg



ます。

変数内の行はエスケープできません;それらは7コロン（セミコロン）で閉じられます。

ネストされたセレクター

製品アイテムがあり、価格、説明、購入ボタン、モデル番号など、個別のデザインを必要とする多くのネストされたアイテムがあるとします。 そしてもちろん、今度は100回続けてli.product tra-ta-taを書かなければなりません...今ではすべてがより簡単になりました：

 li.poduct { a { color: $basicColor; } .price { color: $priceColor; font-size: 2em; } .buy { background-color: $attentionColor; } // …  ..  .. }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出力では次のようになります。

 li.product a { color: $basicColor; } li.product .price { color: $priceColor; font-size: 2em; } li.product .buy { background-color: $attentionColor; } // …  ..  ..
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

便利ですか？ 次に、プロトタイピングについてお話します

プロトタイピング

要素の配置が同じで、配色が異なる3つの製品、たとえば、通常の製品、ベストセラー、ノベルティを取り上げます。 まず、通常の製品のプロトタイプを作成します。

 .product { self { min-width: 200px; min-height: 300px; } h1 { padding-bottom: 1em; color: $headersLight; } } .bestSeller extends .product { self { background-color: $productBestBg_; } h1 { color: $productBest_; } } .new extends .product { self { background-color: $productNewBg_; background-image: url($path/new_bg.png); } h1 { color: $productNew_; font-size: 1.2em; padding-bottom: 1.8em; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

roseltatでは、必要なすべてのルールのセットを取得します。

 .new, .bestSeller, .product { min-width: 200px; min-height: 300px; } .new h1, .bestSeller h1, .product h1 { padding-bottom: 1em; color: $headersLight; } .new h1 { color: #00ffcc; font-size: 1.2em; padding-bottom: 1.8em; } .new { background-color: #0000cc; background-image: url(/storage/images/new_bg.png); } .bestSeller { background-color: #ff33cc; } .bestSeller h1 { color: #ff00cc; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、xCSSを使用するときはクラス名の重複を避け（プロトタイプ名を除く）、クラス名を変更するときは

Php

次に、phpコンポーネントと、この奇跡をプロジェクトに付加する方法について説明します。

1. xcss-class.phpファイルをライブラリにスローします。
2. xCSSファイルのあるフォルダーで、index.phpスクリプトを作成し、そこにコードを貼り付けます。

     $ config = array（）;
    $ config ['path_to_css_dir'] = '../';  // <i>これはcssおよびxcssディレクトリのルート</ i>
   
    $ config ['xCSS_files'] = array（
   	 'styles / main.xcss' => 'generated / main.css'、
    //ファイル名xcss =>名前を付けて保存
    ）;
   
    $ config ['master_file'] = true;  <i> //ユーザーマスターファイル（すべてのスタイルが含まれるファイル）、デフォルトではtrue </ i>
    $ config ['master_filename'] = 'master.css';  <i> //マスターファイルの名前。デフォルトは「master.css」</ i>
   
    $ config ['reset_files'] = array（
   	 'static / reset.css'、<i> //デフォルトのブラウザ設定をリセットするスタイル</ i>
    ）;
   
    $ config ['hook_files'] = array（
   	 'static / hooks.css：screen'、<i> //他のメディアタイプのファイル（間違っている可能性があります）</ i>
    ）;
   
    $ config ['construct_name'] = 'self';  <i> //内部の要素の名前。デフォルトでは「self」</ i>
   
    $ config ['compress'] = true;  <i> //余分なスペースを削除します。デフォルトではfalse </ i>
    $ config ['debugmode'] = false;  <i> //デバッグモードを有効にします。デフォルトではfalse </ i>
   
    $ config ['disable_xCSS'] = false;  <i> // xCSSを無効にします。デフォルトではfalse </ i>
    $ xCSS =新しいxCSS（$ config）;
    $ xCSS-> compile（）; 

3. HTMLページのヘッダーに挿入します。これは、CSSでxCSSを収集するxcss / index.phpファイルを参照し、マスターファイルをインクルードします： />
   
   
   
   
4. お休みください。

著者から

もちろん、著者が示唆するようにxCSSは使用しませんが、必要なすべてのスタイルを1つのファイルに貼り付け、gzipで圧縮してキャッシュに入れ、xCSSは開発中にのみ使用します。

ご清聴ありがとうございました！

参照資料

• xCSSプロジェクトサイト
• Google.CodeのxCSS-0.9.2