Sass と Compass を組み合わせて CSS_html/css_WEB-ITnose を記述する
最近 Sass を使って CSS コードを書こうと思っていますが、最初は CSS を連鎖的に書くことにまだ慣れていませんが、これは暫定的な段階です。
Sass をまだ知らない場合は、以前に公開された記事を読んで詳細を学ぶことができます。Sass には主に次の機能があります (主な内容はここからです)
オリジナルの scss ファイルは左側にあり、コンパイルされたものは次のとおりです。は右側にあります:
1 .Variables 変数
パラメーターとして $ を先頭として使用します
2. 入れ子のネスト構造
誰が誰の子要素であるかは非常に明確であり、次のように先頭を繰り返す長い行を記述する必要はありません。前
3. ミックスイン
は実際には関数のように使用され、パラメータを取ることもできます
4. 継承継承
その他のよく使用される関数
1.ポート
只要在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
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)

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex
