プリプロセッサを使用する理由

レイアウトに関してはかなりの経験があります-数年。

この間、テーブルレイアウト、独自のフレームワーク、IE6、レスポンシブデザインなど、多くのことがありましたが、私は常に、最先端に近づこうとしていました。

より多くのCSSフレームワーク（hiブートストラップ）とEmmet、私はプリプロセッサが好きで、その理由を説明します。 私の記事はやや時代遅れで、今では誰もがプリプロセッサを当たり前のように使用しているように見えるかもしれませんが、残念ながら、そうではありません。 最近、私はプリプロセッサを使用するよりもCSSコードを書く方が速いと言った人に会いました。 私たちは長い間、実際、非常に長い間議論していましたが、結局、ここで考えを1か所にまとめることにしました。

Less or Sass？

まあ、実際には、これは皆のビジネスです。 私はSassが遅いので好きではありませんでした-Lessは常により速く動作し、その結果、ある時点でLessに切り替えることにしましたが、しばらくすると、そのパワーが足りないことがわかりました！ 残念ながら、私はこのレベルの平凡なミックスインを実装する方法を見つけませんでした。

しかし、Sassの遅さは適切ではありませんでしたが、私がSassに戻りたいと思ったまさにその瞬間に、疑念に苦しめられ、 libsassからアドバイスを受けました 。 私はGruntを使用します-grunt -sassだけを接続するだけで十分でした（たとえば、Rubyとgemをインストールするなど）。 私にとって、選択は明確で、それ以来-libsassのみでした 。 Sass自体のパワーとスピードC-他に何が必要ですか？

どういうわけか、私はまだスタイラスを試していません。

プリプロセッサはなぜですか？

おそらく新しいことは言いませんが、プリプロセッサを使用する価値がある理由を示したいと思います。

変数

変数は素晴らしいものです。 「プリプロセッサはレイアウトデザイナーではなくプログラマーによって発明された」と非難されましたが、変数を拒否するにはどうすればよいですか。 デザイナーを含む私、すべての色、フォント設定など-人生を大いに促進する簡単な例 プロジェクトの場合、 _variables.scssファイルに保存するだけで十分です



次に、必要なときに、完全なプロパティではなく変数のみを指定します。 背景：$ bgBrand 、なぜなら 私の背景は多くの場所で使用されているため、変数のプロパティを1か所で編集する方が簡単であり、ファイルや1つのファイルで検索することはありません。1か所で編集するよりも長くなります。

ネスティング

親要素のネスト：hover ,: after ,: before ,: nth-childよりも良いものはありますか？

シンプルで非常にシンプルな例：

 a { color: $blue; &:hover { color: darken($blue, 10%); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その中で、変数、 darken()



内部関数、および同じネストを使用します。 些細なことのように思えますが、レイアウトはそのような些細なことで構成されています。 特定のブロックに関連するものを見て、その下にあるものではなく、その中にあるものを見る方が便利な場合があります。 .my-super-class:hover



毎回書くのはまだ意味がありません。 BEMアプローチの支持者はこの可能性を高く評価しますが、独自のツールがあります。

ヘッダーのないテーブルを作成する必要がありました（Bootstrapを使用しました）。

ミックスイン、インポートなど

プリプロセッサの最も重要なプラスは、ミックスイン、拡張などです。 それは通常の言語の関数のようなものです-必要なときに接続して、何度でも使用できます。 個人的には、あまり頻繁にミックスインを使用しませんが、 私はモバイルファーストアプローチで組版を進めています。既に述べた小さなミックスインの1つが非常に役立ちます。

 @mixin responsive($media) { @if $media == sm { @media (min-width: 768px) { @content; } } @else if $media == md { @media (min-width: 992px) { @content; } } @else if $media == lg { @media (min-width: 1200px) { @content; } } @else if $media == xlg { @media (min-width: 1700px) { @content; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

@メディアクエリのように、非常に単純に使用されます。@ @include responsive(sm) { background-color: red }



およびこれと、要素のネスト。



インポート-CSSに存在しますが、私たちが望む方法ではありません。 なぜなら プリプロセッサについて話します。最終的には、接続されているすべてのファイルが1つにまとめられます。これは、サーバーに対して1つの要求しか行われないため便利です。 プロジェクトのアーキテクチャを特定のモジュールまたは単なるブロックに保持するには、インポートが非常に便利です。

「生成されたコードがわかりません。」

この議論を聞いたとき、何が議論されているのかよくわかりませんでした。 その後、彼らは私に説明しました（その人はフリーランスで働いています）-彼はSass以下のプロジェクトを受け取りますが、生成されたコードはひどいです、あなたはそれを理解することはできません。 そして、これは間違ったアプローチです。プリプロセッサは、開発を便利にするために、プロジェクトアーキテクチャを良好な状態に保つための人々のためのものです。 人が普通に書いた場合、出力のCSSは最適化されます。この面では、書き込まれた内容に違いはありません-CSSまたはSassでは、Sassはブラウザではなく開発者のみを支援します。 ブラウザのサポートには、 ソースマップがあり 、Gruntのような通常のツールでサポートされています。

例

少し前まで、ソーシャルネットワーク用のボタンが必要なプロジェクトを1つ開発していました。それほど多くはありませんが、5つ程度ですが、そのとき、膨大な数のボタンが格納されるSassを使用してライブラリを作成する方法を考えました。 もちろん、CSSでこれを行うのは不便なので、Sassを使用することにしました。 最後に、私たちが議論した人は、決定の優雅さに注目しました。

Brand Buttonsを作成するには、かなり必要なものがありました。

• brand: color
  
  
  
  1つの配列リスト brand: color
  
  
  
  
• すべてのプロパティが保存されているMixin
• そして、クラスを生成する1つの関数

その結果、Sass機能の小さいながらも強力な部分を使用した3つのファイルがあります。変数、インポート、ミックスイン、 各 / @のような内部関数です。 最終的なCSSは687行になりました。

このプロジェクトに新しいボタンを追加するには、 _variables.scssに ブランドの 1行を挿入するだけで十分です。色を付けてgrunt build



を実行grunt build



、新しいクラスを手動で作成する必要はありません。



プリプロセッサは、変数のような小さなものが生産性を大幅に向上させることができるという話です。 プリプロセッサーはプログラマーによって作成される場合がありますが、複雑なものは一切追加せず、寿命を改善するだけです。コードは読みやすく、さらに小さくなり、一貫性が増します。 この記事では、多くの可能性については触れませんでしたが、プリプロセッサを使用する理由と、それにもかかわらず決定する人にどのような利点があるかを示したいと思いました。