ホームページ > ウェブフロントエンド > htmlチュートリアル > 強力な CSS ツールの組み合わせ: Blueprint、Sass、Compass_html/css_WEB-ITnose

強力な CSS ツールの組み合わせ: Blueprint、Sass、Compass_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:55:50
オリジナル
1201 人が閲覧しました

掌握CSS是每个Web开发者的基本要求,虽然CSS本身并不复杂,但怎样写出支持所有主流浏览器(特别是IE)的CSS,以及在大型网站中如何有序地组织好CSS结构却是一个相当棘手的问题。我更多的是一个开发者,而不是一个设计师,却不幸花了大量时间处理CSS这些棘手问题,如果能有一些工具能帮我处理这些问题,那将很有意义。经过一段时间的搜索和研究,还真发现了几个很棒的工具,感觉真是相见恨晚,与大家分享之。

 

Blueprint CSS Framework

 

刚才说过了,处理浏览?的不一致性是很困难的事情。每开始一个新项目,我们都需要做一些重复的事情,比如需要将一些元素的padding和margin重置为0,设置某些元素的默认样式,定义一些通用的样式等,这些由于浏览器之间的不一致而变得复杂。有了blueprint ,你就不用再担心这些啦,blueprint已经非常完美的为你做好这些事情了。这还只是blueprint做的一小部分事情,它还定义了一些form的样式,另外它带一些插件。blueprint还是一个基于网格(grid)布局的框架。在我看到blueprint之前还不知道网格布局已经这么流行了。网格布局就是把浏览器内容区域划分一些固定的大小的网格,网页中元素的定位都向网格靠齐。blueprint默认设置网页的宽度为950像素,并它分成24个网格,每个网格宽度为30像素,每个网格之间的距离为10像素。

 

 

在blueprint下布局非常容易,我们来看如何使用blueprint来做非常常见的三列布局:

 

Html代码  

  1.   
  2.   
  3.       
  4.         
  5.       
  6.   
  7.   
  8.   
  9.     
      
  10.         Header  
  11.     
  
  •     
      
  •         Left sidebar  
  •     
  •   
  •     
      
  •         Main content  
  •     
  •   
  •     
      
  •         Right sidebar  
  •     
  •       
  •     
      
  •         Footer  
  •     
  •   
  • 40-10=150 ピクセル。コンテンツが 24 番目のスタイルをまたぐ場合、最後のスタイルを定義する必要があることに注意してください。最後のスタイルの機能は、右マージンを 0 に設定することです。したがって、上の例は非常に明確で、ヘッダーとフッターは 24 グリッドすべてに広がり、左側と右側の列はそれぞれ 4 グリッドに広がり、中央のコンテンツは 16 グリッドに広がります。以下は、ブループリントの組み込みスタイルを完全に使用するさらにクールな例です。
  • ブループリントはレイアウトを簡単にしますが、問題もあります。つまり、パフォーマンスベースのクラス名 (span-x など) を多数使用しており、cass 名はセマンティクスに基づく必要があるというルールに完全に違反しています。 。このことはひとまず脇に置いて、別の非常に強力なツールを見てみましょう。
  • Sass

    Sass は CSS を出力するプログラミング言語です。そう、CSS にもプログラミング言語があります。 Sass は Ruby 言語に基づいており、Haml の一部であるため、Sass をインストールするには Haml をインストールする必要があり、もちろん Ruby もインストールする必要があります。私はHamlは好きではありませんが、Sassはとても好きです。次のコマンドで Haml をインストールします (これにより Sass もインストールされます)。オペレーティング システムによっては、コマンドに sudo を追加する必要がある場合があります。

    Sass はインデントベースの言語です。例を見てみましょう:

    Sass コード

    table.hl

    margin: 2em 0

    td.ln

    text-align: right
    font:

    family: serif

    重量: 太字

    サイズ: 1.2em

    上記を仮定して、style.sass ファイルに保存し、コマンドを実行します:
    1. コマンド コード
    2. sass style.sass style.css
    3. スタイルを出力します.css ファイル、その内容は次のとおりです:
    CSS コード

    table.hl {

    margin: 2em 0;

    }

    table.hl td.ln {

    テキスト整列: 右;
    1. }
    li {

    フォントファミリー: セリフ;

    フォントサイズ: 1.2em;

    の利点がわかりますSass 構文はインデントに基づいているため、共通プレフィックスを記述する必要があるのは 1 回だけですが、CSS ファイルでは複数回繰り返す必要があるため、メンテナンス上問題があります。もちろん、Sass ではさらに多くのことができ、変数やミックスインもサポートされています。ミックスインは再利用可能なスタイルであり、パラメータを取ることもできます。 Mixin の定義は「=」で始まり、変数の定義は「!」で始まります。

    1. Java コード
    2. =table-scaffold
    3. th
    4. text-align: center
    5. font-weight: 太字
    6. td, th
    7. パディング: 2px
    8. =left( !dist)
    9. float: left
    10. margin-left = !dist

    #data

    +left(10px)

    +table-scaffold

    上記のコードは2 つの Mixin、彼らはtable-scaffoding と left 。 left は dist パラメータも受け取ります。 #data スタイルには、left Mixin および table-scaffolding Mixin によって定義されたスタイルが含まれます。次の CSS が出力されます:
    1. Java コード
      1. #data {  
      2.   float: left;  
      3.   margin-left: 10px;  
      4. }  
      5. #data th {  
      6.   text-align: center;  
      7.   font-weight: bold;  
      8. }  
      9. #data td, #data th {  
      10.   padding: 2px;  
      11. }  

       

      Mixin是Sass非常强大的一个特性,想想看你是不是在项目中看到很多重复的CSS定义,你不得不来回的拷贝复制。通过Sass你可以将这些公用的Sass定义成一个Mixin,然后在其它实际定义样式的地方包含它。你甚至还可以定义项目之间都通用的Mixin,把它们包含在一个单独的文件里,就像类库一样,需要时就引用。我们可以为Blueprint的样式转变成Sass的格式,并把它们做成Mixin,然后再定义基于语义的样式,它们包含这些Mixin,这样我们就可以在页面中使用语义样式名称了,而不需要使用Blueprint带的基于表现的样式。幸运的是,我们并不需要自己做这些事情,已经有另外的框架帮你做好了,那就我接下来要谈的Compass。Sass支持变量的运算,这有时非常方便,我们可以定义一些元素的宽度,定义为变量,其它元素的宽度由它们计算出来,当改变布局时,只需要修改几个变量的值就可以了。作为一门编程语言,Sass还支持控制条件和循环语句,虽然这在一般情况下很少用到。

       

       

      Compass

       

      Blueprint提供了一个非常健壮的CSS框架,但是却大量使用基于表现的class名称;Sass语言提供将基于表现的class名称转化成基于语义的class名称的基础设施,但本身不带任何样式;Compass 的作用就是将两者集成到一块,结合两者的优点。Compass还支持其它CSS框架的集成,这里就不说了。Compass也是基于Ruby语言的,使用下列命令来安装:

       

      Command代码  

      1. gem install compass  

       

      要开始一个新的Compass项目,使用:

       

      Command代码  

      1. compass -f blueprint project-name  

       

      选项-f表示和blueprint框架集成。进入到项目目录下,让我们基于Compass来实现一个三列布局。先写HTML文件:

       

      Html代码  

      1.   
      2.   
      3.     
      4.     
      5.     
      6.     
      7.   
      8.   
      9.   
      10.     
      11.         Header  
      12.       
      13.     
      14.         Left sidebar  
      15.       
      16.     
          
      17.         Main content  
      18.     
      19. まで
      20. 彼らスタイルを定義し、プロジェクト ディレクトリで src/screen.sass ファイルを開き、その内容を次のように変更します:
      21. Sass コード
      22. // このインポートは、インポートするすべてのページにグローバル リセットを適用します。このスタイルシート。
      23. @import blueprint/reset.sass
      24. // ブループリントを設定するには、partials/base.sass ファイルを編集します。 / scalability.sass

      +blueprint-typography("body")

      +blueprint-scaffold("body")

      +blueprint-utilities

      +blueprint-debug blue
        +print- interaction
      1. #container
      2. +container
      3. #header, #footer
      4. // true は最後の列であることを意味します
      5. +column(!blueprint_grid_columns, true)
      6. // サイドバーが 1/ を占めますつまり、ページ全体の 4 列です
      7. !sidebar_columns = Floor(!blueprint_grid_columns / 4)
      8. #left-sidebar
      9. +column(!sidebar_columns)
      10. #main-content
      11. +column( !blueprint_grid_columns - 2 * !sidebar_columns)
      12. #right-sidebar
      13. +column(!sidebar_columns, true)
      14. 最初の数行は、多くの Mixin を含む Blue に関連する Sass スタイルを提供するために Compass をインポートします。に使える。 #header と #footer のスタイルには、列 Mixin が直接含まれます。最初のパラメーターは、compass によって定義された bluepring_grid_columns 変数です。デフォルトは 24 です。これは、要素が最後の列にまたがることを意味します。 left-sidebar と right-sidebar はページ全体の幅の 1/4 を占めます。変数sidebar_columns は、bluepring_grid_columns に基づいて計算される、サイドバーが占める列の幅を表します。同様に、メインコンテンツの幅も計算されます。これらにはすべて、列 Mixin が直接含まれています。それを CSS に変換し、プロジェクト ディレクトリで次のコマンドを直接使用します:
      15. Java code
      16. compass
      17. src ディレクトリ内の sass ファイルを対応する css に変換します。ここで、作成した HTML ファイルを開くと、ページの通常のレイアウトが表示されるはずです。
      18. プロジェクト開発中、sass ファイルを css ファイルに変換するために毎回手動で compass コマンドを呼び出す必要がある場合、compass にはコマンド

      コマンドコード

      compass が用意されています。 - w

        src ディレクトリ内の sass ファイルへの変更を自動的に監視し、自動的に css ファイルに変換します。

    関連ラベル:
    ソース:php.cn
    前の記事:Jsoup はページ データをクロールし、HTTP メッセージ headers_html/css_WEB-ITnose を理解します 次の記事:codeforces Round #261(div2) D問題解決レポート_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート