コミュニティ

記事 トピックス に質問

学ぶ

コース プログラミング辞典

ツールライブラリ

開発ツール 公式サイト PHP ライブラリ JS特殊効果 サイト素材 拡張プラグイン

レジャー

ゲームのダウンロード ゲームのチュートリアル

日本語

简体中文 English 繁体中文 日本語 한국어 Melayu Français Deutsch

Login

singup

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

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

WBOY

リリース： 2016-06-24 11:55:50

オリジナル

1210 人が閲覧しました

掌握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  

    

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

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

Sass コード

table.hl

margin: 2em 0

td.ln

family: serif

重量: 太字

サイズ: 1.2em

3. コマンド コード
5. sass style.sass style.css
8. スタイルを出力します.css ファイル、その内容は次のとおりです:

table.hl {

margin: 2em 0;

}

table.hl td.ln {

1. }

の利点がわかります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

3. Java コード
4. 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. まで
   彼らスタイルを定義し、プロジェクト ディレクトリで src/screen.sass ファイルを開き、その内容を次のように変更します:
   Sass コード
   // このインポートは、インポートするすべてのページにグローバル リセットを適用します。このスタイルシート。
   @import blueprint/reset.sass
   // ブループリントを設定するには、partials/base.sass ファイルを編集します。 / scalability.sass
   +blueprint-typography("body")
   +blueprint-scaffold("body")

   +blueprint-utilities

   +blueprint-debug blue
   +print- interaction
   #container
   +container
   #header, #footer
   // true は最後の列であることを意味します
   +column(!blueprint_grid_columns, true)
   // サイドバーが 1/ を占めますつまり、ページ全体の 4 列です
   !sidebar_columns = Floor(!blueprint_grid_columns / 4)
   #left-sidebar
   +column(!sidebar_columns)
   #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 ファイルに変換します。