ホームページ ウェブフロントエンド htmlチュートリアル Sass と Compass を組み合わせて CSS_html/css_WEB-ITnose を記述する

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

Jun 24, 2016 am 11:22 AM

最近 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)

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

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

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

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

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

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

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

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

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

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

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

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

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

See all articles