コンパス module_html/css_WEB-ITnose
Compass コアモジュール
Reset : CSS モジュールをリセット
@import "compass/reset"
Layout : ページレイアウト制御機能
@import "compass/layout"
これら 2 つのモジュールのみを明示的に設定する必要がありますインポートされた
@import "コンパス" には以下が含まれます他の 5 つのモジュールはデフォルトで含まれていますが、resrt、layout は含まれていません
他の 4 つの機能モジュールとブラウザーサポートモジュール
CSS3: クロスブラウザー CSS3 機能
ヘルパー: 一連の関数と SASS 関数リストが含まれていますは非常に似ており、比較的まれに使用され、機能は実に豊富で強力です。 タイポグラフィ: テキストのスタイルと縦のリズムを変更します。 ユーティリティ: 他のモジュールに配置できないコンテンツをこのモジュールに配置できます。補助ツール モジュール、ヘルパーはすべて関数であり、ユーティリティはほとんどがミックスインです
ブラウザ: コンパスがデフォルトでサポートするブラウザを設定します。特定のブラウザでデフォルトでサポートされているバージョン。変更は 6 つのモジュールの出力に影響します。ブラウザーが異なれば適応も異なります。
Compass コア モジュールの概要とリセット モジュール
compass-normalize プラグイン コマンドのインストール:
gem install compass-normalize
config.rb ファイル内:
require 'compass-normalize'
config.rb ファイルの import-once
は、同じファイルを複数回 @import する問題を解決し、コンパスはインポートされたファイルを 1 回だけ挿入します。ただし、import-once を使用していて、ファイルを 2 回インポートする必要がある状況が発生した場合は、インポートされたファイルのファイル名の後に感嘆符を追加できます。繰り返し導入する必要があることをコンパスに伝える方法。 @import "compass/reset!" SCSSファイルの参照正規化
@import "normalize";
base: HTMLとbodyタグのフォントの統一、文字サイズの調整、余白などに使用されます。 html5: html5 の新しい要素の表示形式を統一します。
links: ノートのスタイル変更を統一し、ホバー時およびアクティブ時の境界線を削除します。
タイポグラフィ: b、strong、sub、sup などの段落テキストのスタイル変更を統一します。
embeds: img、svg、その他のタグのスタイル変更を統一します (例: img タグの境界線を 0 に統一します)
groups: Figure、pre、code などのタグのスタイルを統一します
forms: のスタイルを統一しますフォーム関連のボタン、input、その他のタグ
tables: table、td、th およびテーブルに関連するその他のタグのスタイルを統一します
@import "normalize-version"//--在引入子类之前需要引入normalize-version@import "normalize/base"
@import "compass/これらの
mixin@import "compass/reset"; のコレクションは、実際には
compass/reset/untlitiesを導入し、グローバルの 1 つを呼び出すミックスインのコレクションです。 -リセット();。
@import "compass/reset/untlities";include global-reset();
http://compass-style.org/reference/compass/reset/utilities/nested-reset: ページの特定のセレクターの下でリセットするためにのみ使用されますすべての要素。
例:
reset-sec のすべての要素をリセットします
:
.reset-sec{ @include nested-reset;}
Layout モジュール (最も使用されるモジュール
layout)モジュール セグメンテーション 3 コア mixin
モジュールは次のことができます。別途紹介します。
1 @import "compass/layout";2 @import "compass/layout/grid-background";3 @import "compass/layout/sticky-footer";4 @import "compass/layout/stretching";
をストレッチします。例:
1 .stretch-full {2 @include stretch();3 }4 .stretch-full2 {5 @include stretch(5px,0px,5px,5px); //非0值单位px不可省6 }7 .stretch-full3 {8 @include stretch($offset-top:5px,$offset-right:0px,$offset-bottom:5px,$offset-left:5px); //参数顺序可变,非0值单位px不可省9 }Sass 変換後のコード:
1 .stretch-full { 2 position: absolute; 3 top: 0; 4 bottom: 0; 5 left: 0; 6 right: 0; 7 } 8 .stretch-full2 { 9 position: absolute;10 top: 5px;11 bottom: 0;12 left: 5px; right: 5px;13 }14 .stretch-full3 {15 position: absolute; 16 top: 5px;17 bottom: 5px;18 left: 5px; right: 0px;19 } 1 <body>2 <div id="root">3 <div id="root_footer"></div>4 </div>5 <div id="footer">6 Footer content goes here.7 </div>8 </body>
@include sticky-footer(54px) //参数为footer高度@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer") // 自定义选择器
CSS3 モジュール & ブラウザ サポート モジュール (アクティブな使用量が多いモジュール)
CSS3モジュールを使用する場合 調整ブラウザ サポート モジュールの構成を変更し、CSS3 が積極的に調整されていない場合でもブラウザ サポート モジュールを導入します。 CSS3 モジュールは主に CSS3 機能のクロスブラウジングに使用されます。
例:
1 @import "compass/css3";2 .webdome-sec{3 @include box-shadow(1px 1px 3px 2px #cfcecf);4 }生成されたコード:
1 .webdemo-sec {2 -moz-box-shadow: 1px 1px 3px 2px #cfcedf;3 -webkit-box-shadow: 1px 1px 3px 2px #cfcedf;4 box-shadow: 1px 1px 3px 2px #cfcedf;5 }Firefox 適応コードを自動的に生成する必要がない場合は、ブラウザ サポート モジュールを使用する必要があります。コンパスがデフォルトでサポートするブラウザを設定します。特定のブラウザでサポートされているバージョン。ブラウザ サポート モジュールを変更すると、残りの 6 つのモジュールの出力に影響します。 サポートのご紹介:
@import "compass/support";
引入了CSS3模块，相当于间接引入了support模块。
查看当前支持的浏览器版本：
控制台命令：
1 compass interactive //进入一个用于测试Compass中SassScript的控制台2 browsers() //查看支持的浏览器3 browser-versions(chrome) //查看支持的chrome版本
在sass文件中输入 @debug browsers() 控制台也会打印出支持的浏览器。
设置compass支持的浏览器：
@import "compass/css3";$supported-browsers: chrome firefox;
也可以写成： $supported-browsers: chrome,firefox ; 浏览器队列用 空格或者逗号分隔均可。
设置compass支持的浏览器的最低版本（compass默认支持到ie5.5）：
$browser-minimum-versions:("ie":"8","":"")不设置的话 默认支持 browsers-versions 返回的的版本。
Animation：CSS3动画相关的特性。
Appearance：CSS3的appearance属性，也是CSS3的新规范中新定义的新属性。（还没有一个主流的浏览器支持这个属性）
Background Clip、Background Origin、Background Size：CSS3新增的background相关的属性，用来规定背景的绘制区域、背景图像的定位原点、背景图像的尺寸等。
Border Radius：边框圆角属性
Box、Box Shadow
Box Sizing：用来修改盒模型的宽高的度量方式。
CSS Regions：控制内容布局的新方式
CSS3 Pie：尽可能提高ie浏览器呈现许多CSS3功能
Columns：CSS3的多列布局属性
Filter：主要用于在图片上实现一些特效
Flexbox：（移动端web开发用的比较多）
Font Face：不依赖于用户计算机上安装好的字体，指定下载好的某一种字体
Hyphenation：如何断字换行
Images：CSS3新增了这种生成渐变图形的方式，images用于需要使用这两种方式充当图片的场景。
Inline Block：实现跨浏览器的display:inline-block;能力
Opacity：透明属性，为了兼容低版本的IE
Selection：使用CSS3的selection伪元素定义被选中文本的颜色和背景色
Shared Utilities：想贡献CSS3模块的相关compass插件会用到。工具类模块
Text Shadow：文字阴影属性
Transform、Transition：变幻动画属性
User Interface：限制某一区域是否允许鼠标拖拽选择，input元素在无填写状态下提示语的样式
Typography模块
分为四个模块：
Links：链接修饰模块正常态下去掉下划线，在hover的情况下才显示这个下划线hover-link();
1 a{2 @include hover-link();3 }编译之后：
1 a {2 text-decoration: none;3 }4 a:hover, a:focus {5 text-decoration: underline;6 }修改不同状态下超链接的颜色link-colors
抹平超链接样式，和他跟父容器的文本无异unstyled Link
Lists：列表修饰模块
Text：文本修饰模块
Vertical Rhythm：垂直韵律修饰模块
@import "compass/typography/vertical_rhythm";
ホット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）
ホットトピック
7319
9
1625
14
1349
46
1261
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆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の場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
