SCSSおよびCompass Frameworkのレイジーレイアウト

ターンキーWebサイトを作成します。 設計からホスティングまで。 そして、この魅力的なプロセスの中で私が最も愛していないのは、HTMLでのデザインのレイアウトです。 複雑なことは何もないように見えますが、多くの日常的な作業は非常に疲れています。 したがって、私はこの分野で興味深いソリューションを常に探しています。



少し前に、Ruby on Rails 3を学び始め、そのための非常に興味深いプラグインCompassを見つけました。 実際、このCSSフレームワークはRailsから独立しており、他のタイプのプロジェクトで使用できます。



Compassが私の人生を楽にしてくれたことをお話しします。

SCSS

最初に注目するのは、フレームワークがSASSおよびSCSS言語を使用していることです。 このプロジェクトのホームページでそれらについて読むことができます。 要するに、これらはスタイルシートを書くための代替言語です。 もちろん、コンパイル後の出力は依然として最も一般的なCSSのままですが、主な利点は、これらの言語がスタイルの記述を大幅に高速化することです。



私自身は、SCSSを使いました（その構文は通常のCSSの構文に似ているため）。 この言語は、レイアウトデザイナーに4つの超能力を与えます。

1.変数

素晴らしいこと！ そのためだけに、すでにSCSSに切り替えることができます。 状況を想像してください。ブロックのフレームの色とリンクの色を同じにする必要があるページを作成しています。 そして突然、顧客はこの色を明るくする必要があると言います。

.megablock { border-color: #A88; } .megablock a { text-decoration: none; color: #A88; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、スタイルシート全体でこの色を探して変更しています。 また、SCSS変数を使用すると、このコードを容易にし、柔軟性を高めることができます。

 $block-color: #A88; .megablock { border-color: $block-color; } .megablock a { text-decoration: none; color: $block-color; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、色を変更するには、テキスト内の1つの変数を変更するだけです。 さらに、数学演算を変数に適用できます。 例：

 $border-color - #111
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.添付

スタイルの記述を高速化する別のこと。 table.cart div span a



ような長いセレクターをどのくらいの頻度で記述しましtable.cart div span a



か？ SCSSでは、セレクターを相互にネストできます。

 table.cart { width: 700px; div { float:left; span { font-size: 14px; a { color: $cart-link-color; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多くの場合、これによりコードが読みやすくなります。

3.ミックスイン（不純物）

それでも、おそらく異なるセレクターで同じルールを頻繁に記述する必要がありますよね？ たとえば、すべてのブラウザの角を丸くします。 SCSSでは、ここで時間を節約できます。

 #promo { background-color: $promo-bg-color; @border-radius(10px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、最初にCompassフレームワークの機能の一部を紹介します。これは、 border-radius



「混合」がその機能の標準セットに既に含まれているためです。

4.セレクターの継承

無視できないもう一つの快感。 本質的には、前のものと似ています：

 .notification { border: 1px solid; margin: 0 auto; } .errorNotification { @extend .notification; background-color: #f11; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.errorNotification



セレクターをコンパイルすると、 .errorNotification



からのすべてのルールが含まれることを推測するのは簡単です

コンパスフレームワーク

さて、実際には、フレームワーク自体についてです。 彼のドキュメントを見て、彼がWeb開発者の生活を単純化する方法を理解してください。 膨大な数の既製のミックスイン、クラス、Blueprint CSSフレームワークとの緊密な統合。



もちろん、すべてを説明するのに十分な忍耐力はありませんが、フレームワークのメインチップについて説明します。

クロスブラウザCSS3

各ブラウザー（WebKit、Mozillaなど）のルールを記述しないために、開発者はCSS3ローションをすばやく作成するための多くのツールを組み込みました。 グラデーション、丸い角、影などを1本の線で作成できるようになりました。

ヘルパー

コンパスには、多くのヘルパーツールも含まれています。 たとえば、すべてのヘッダーに同じフォントを使用する場合は、 headings(all)



をセレクターとして使用できます。 ページの下部にフッターを接着するための既製のツールもあります。

ハックとユーティリティ

はい、クロスブラウザの問題に対処するために設計されたさまざまなハックは特に価値があります。 フロート、Clearfixes、ローなど

そして、非常に便利なユーティリティの例として、 link-colors()



混合物を使用すると、1つの行で4つのリンク状態すべてに4色を設定できます。

設計図

それとは別に、CompassはBlueprint CSSフレームワークのすべてのクラスをすぐにサポートしていることに言及する価値があります。 グリッド、タイポグラフィ、フォーム、ボタン、その他すべて。 個人的には、ブループリントは既成のクラスのおかげでサイトのレイアウトを長年にわたって促進してきたため、これは大きなプラスでした。Compassにバンドルされると強力なツールになります。

合計

しかし、おそらくSCSSとCompassの主な利点は、それらが非常にシンプルで透過的であることです。 上記の利点の使用を開始するには、1時間もかかりませんでした。

Railsプロジェクトの場合、私は代替手段を見つけません。 ただし、興味がある場合は、他の環境で使用してみてください。

HAMLも接続すると、ページレイアウト時間が平均で2〜3倍短縮されます。 これ以上の議論は必要ないと思います。