コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > 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 ファイルに保存し、コマンドを実行します:
    3. コマンド コード
    5. sass style.sass style.css
    8. スタイルを出力します.css ファイル、その内容は次のとおりです:
    CSS コード

    table.hl {

    margin: 2em 0;

    }

    table.hl td.ln {

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

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

    フォントサイズ: 1.2em;

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

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

    #data

    +left(10px)

    +table-scaffold

    上記のコードは2 つの Mixin、彼らはtable-scaffoding と left 。 left は dist パラメータも受け取ります。 #data スタイルには、left Mixin および table-scaffolding Mixin によって定義されたスタイルが含まれます。次の CSS が出力されます:
    3. 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. まで
        21. 彼らスタイルを定義し、プロジェクト ディレクトリで src/screen.sass ファイルを開き、その内容を次のように変更します:
        24. Sass コード
        26. // このインポートは、インポートするすべてのページにグローバル リセットを適用します。このスタイルシート。
        27. @import blueprint/reset.sass
        28. // ブループリントを設定するには、partials/base.sass ファイルを編集します。 / scalability.sass

      +blueprint-typography("body")

      +blueprint-scaffold("body")

      +blueprint-utilities

      +blueprint-debug blue
        +print- interaction
        3. #container
        4. +container
        6. #header, #footer
        7. // true は最後の列であることを意味します
        8. +column(!blueprint_grid_columns, true)
        10. // サイドバーが 1/ を占めますつまり、ページ全体の 4 列です
        11. !sidebar_columns = Floor(!blueprint_grid_columns / 4)
        12. #left-sidebar
        13. +column(!sidebar_columns)
        14. #main-content
      14. +column( !blueprint_grid_columns - 2 * !sidebar_columns)
      15. #right-sidebar
      16. +column(!sidebar_columns, true)
      19. 最初の数行は、多くの 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 に変換し、プロジェクト ディレクトリで次のコマンドを直接使用します:
      22. Java code
      24. compass
      27. src ディレクトリ内の sass ファイルを対応する css に変換します。ここで、作成した HTML ファイルを開くと、ページの通常のレイアウトが表示されるはずです。
      29. プロジェクト開発中、sass ファイルを css ファイルに変換するために毎回手動で compass コマンドを呼び出す必要がある場合、compass にはコマンド

      コマンドコード

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

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

    関連ラベル：
    强悍的CSS工具组合：Blueprint Sass Compass
    ソース：php.cn
    前の記事：Jsoup はページ データをクロールし、HTTP メッセージ headers_html/css_WEB-ITnose を理解します 次の記事：codeforces Round #261(div2) D問題解決レポート_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    3
    2194
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    11
    2341
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1963
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1851
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1910
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート