Sass と Compass を組み合わせて CSS_html/css_WEB-ITnose を記述する

最近 Sass を使って CSS コードを書こうと思っていますが、最初は CSS を連鎖的に書くことにまだ慣れていませんが、これは暫定的な段階です。

Sass をまだ知らない場合は、以前に公開された記事を読んで詳細を学ぶことができます。Sass には主に次の機能があります (主な内容はここからです)

オリジナルの scss ファイルは左側にあり、コンパイルされたものは次のとおりです。は右側にあります:
1 .Variables 変数
パラメーターとして $ を先頭として使用します

2. 入れ子のネスト構造
誰が誰の子要素であるかは非常に明確であり、次のように先頭を繰り返す長い行を記述する必要はありません。前

3. ミックスイン
は実際には関数のように使用され、パラメータを取ることもできます

4. 継承継承

その他のよく使用される関数

1.ポート

スタイルの各部分は _head.scss、_body.scss、_foot.scss に分割され、ベース フォルダーに配置されます。 @import 関数を使用して、3 つのファイルを main.css に含めることができます

只要在main.scss加上

@import "base/head"; @import "base/body"; @import "base/foot";<br />

_head.scss, _body.scss, _foot.scss 這些檔案都不會被編譯成css，記得檔案名稱需以 _ 底線作開頭!

2. 算術関数

lighten(red, 50%) //增亮50% darken(blue, 50%) //變暗50%

その他の機能については、公式の説明を参照してください

CSS 圧縮スタイルを置き換えます

Us拡張圧縮

sass --watch --style expanded style.scss:style.css

コンパイル済み CSS:

#main { color: #fff;  } #main p { width: 10em; } ...

圧縮された圧縮方法

sass --watch --style compressed style.scss:style.css

コンパイル済み CSS:

#main{color:#fff; line-height: 19.5px;"> 

デバッグするかどうかを確認する方法

1.Firefox は FireSass をインストールしますFirebug プラグイン

2 .Recompile

sass --watch --debug-info style.scss:style.css

#デバッグ モードをオンにします (最初にコンパイルされた CSS を忘れずに削除してください)

後で Firebug で確認できます

オンラインで直接テストすることもできます http://sass-lang.com /try.html

実際、sass/scss は単なる CSS の記述に役立つ言語ですが、現在でも各ブラウザのプレフィックスに準拠した CSS を記述するには、@maxin -moz, -webkit, と記述する必要があります。 -o、-ms に遭遇した場合は、css3 を記述する必要があります。パラメータを変更できるようにするのはどうでしょうか。強力な Compass がどれほど強力かを見てみましょう!

まず最初に、Compass をインストールします

gem update --system #先更新 gem gem install compass #安裝Compass 

デフォルトでは、上記のファイルが生成されます。 config.rb で css、sass、画像などのフォルダー設定を行い、必要に応じてカスタマイズできます。それから

compass creat myproject

を入力してください。編集後、scss ファイルの編集を開始できます。アーカイブを保存すると、compass はすぐに設定したフォルダーに CSS をコンパイルします。command + c を押してキャンセルすることもできます。 次回また編集したい場合は、見てください

Compass の便利な機能を見てみましょう

compass watch　　

こうすることで、リセットされた CSS が自動的に作成されます

共通の CSS3 角丸加工

reset css@import "compass/reset"; 

@import "compass/css3"; .box{ @include border-radius(5px); } 

最初に「compass/css3」をインポートするだけで、border-radius、box-shadow、gradient などのすべての css3 コンテンツを使用できるようになります。実際、使用方法は @include です。実際、compass は @mixin を書き込みます。コンパスの優れた点は、各ブラウザに対応する CSS を同時に生成できることです。

All css は自動的に生成されます。すべてを記述する必要はありません。css を何度も書き直すと読みにくくなるだけです。特に、css 属性を書き換えたり改行したりするのは好きではありません。 CSS ファイルを開くと、1 ～ 2,000 行以上あり、とても面倒です! さらに、sass の特徴は、CSS 全体をよりクリーンで明確にします。

全てのブラウザを一行で扱えます! その中でもlighten(red, 20%)はSassのハイライトカラー関数を使用しています。

Sprite

スプライトを作るのは CSS デザイナーにとって大変な作業だと思います! メンテナンスは非常に手間がかかり、画像が変更されると座標を再計算する必要があります。変更すると、全身が変化する可能性があります。

すごいですね。コンパスはとても強力です。同じフォルダーに画像を入れておけば、3 つの願いが一度に叶えられます。結合された別のファイルが自動的に生成され、同時に座標が設定されます。

すごい

その他のコンパス スプライトのチュートリアルと設定: http://compass-style.org/help/tutorials/spriting/

その他の機能: http://compass-style.org /reference/compass/

デバッグはどうでしょうか?

-moz-border-radius: 5px; -webkit-border-radius: 5px;  -o-border-radius: 5px;  -ms-border-radius: 5px; -khtml-border-radius: 5px;  border-radius: 5px;

config.rb 設定ファイルを開き、上記のテキストを追加し、css を再生成し、Firebug でスタイルがどの行に記述されているかを確認し、sass デバッグ プラグインをインストールします。

Sass & Compass のスライド紹介

この非常に詳細で実践的なスライドの紹介を見てみましょう!

フロントエンド開発ブログより転載 (http://caibaojian.com/use-sass-compass-write-css) .html)