ホームページ ウェブフロントエンド 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)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

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

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

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

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

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

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

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

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

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

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

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

&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の場合

&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

See all articles