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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:55 AM

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

Header

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 ファイルに保存し、コマンドを実行します:

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

CSS コード

table.hl {

margin: 2em 0;

}

table.hl td.ln {

テキスト整列: 右;

}

li {

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

フォントサイズ: 1.2em;

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

Java コード
=table-scaffold
th
text-align: center
font-weight: 太字
td, th
パディング: 2px
=left( !dist)
float: left
margin-left = !dist

#data

+left(10px)

+table-scaffold

上記のコードは2 つの Mixin、彼らはtable-scaffoding と left 。 left は dist パラメータも受け取ります。 #data スタイルには、left Mixin および table-scaffolding Mixin によって定義されたスタイルが含まれます。次の CSS が出力されます:

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代码
11. Header
14. Left sidebar
17. Main content
19. まで
+blueprint-typography("body")

+blueprint-scaffold("body")

+blueprint-utilities

+blueprint-debug blue
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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1658

CakePHP チュートリアル

1415

Laravel チュートリアル

1309

PHP チュートリアル

1257

C# チュートリアル

1231

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

HTML、CSS、およびJavaScript：Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML：構造、CSS：スタイル、JavaScript：動作 Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンド Apr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML、CSS、およびJavaScriptの未来：Web開発動向 Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

See all articles