(二)実戦でのSassとCompassの使用
21883 ワード
第三章計算不要プレイCSSグリッドレイアウト
3.1グリッドレイアウトの説明
3.2メッシュレイアウトの使用
3.2.1用語
3.2.3固定メッシュレイアウトかフローメッシュレイアウトか
3.3 Blueprintの使用
3.3.2 CompassアプリケーションBlueprintの使用
3.3.3 Compassアプリケーションを使用してクラス名を必要としないBlueprint
3.4 960メッシュレイアウトシステムの使用
3.5垂直リズムをCompassで処理する
3.5.2前置と後置
3.6まとめ
第四章コンパスがあって退屈しない
//Compassを使用してブラウザのデフォルトスタイルをリセットします.
//スタイルシートのレイアウトを改善するCompassアシスタント;
//Compassを使用して、粘着したフッター/多様なテーブルおよびフローティングを作成します.
4.1.1グローバルスタイルのリセット--global-reset
4.1.2より的確なスタイルリセットによる制御
4.2迅速かつ直感的なレイアウト支援ツール
4.2.1リンク補助ツール
4.2.2リスト補助ツール--様々なリストを作成する
4.2.3テキスト補助ツール--補助ツールで文字を征服する
4.3レイアウト補助ツール
4.3.1粘着したフッター
//高さ40 pxのフッターを生成し、常に一番下にあります.
4.3.2伸張性元素
//要素絶対位置決め、距離境界5 px;
4.4まとめ
//本章では、Compassの時間と労力を節約するツールについて理解しました.
//含む:リンク/リスト/テキスト/レイアウト;
第五章CompassによるCSS 3の使用
//CompassのCSS 3モジュールでブラウザ間CSS 3スタイルシートを作成する
//低バージョンIEでいくつかのCSS 3の特性をサポートする
//CompassのCSS 3上級スキル
5.1新属性:ブラウザ接頭辞
5.2 CompassによるCSS 3の使用
5.2.1フィレット
5.2.2 CSS 3シャドウ--text-shadowとbox-shadow
5.2.3色のグラデーション
5.2.4@font-faceでフォントを埋め込む
5.4まとめ
//CSS 3ミキサーで実現:フィレット/シャドウ/グラデーション及び文字導入;
3.1グリッドレイアウトの説明
3.2メッシュレイアウトの使用
3.2.1用語
1 HTML
2
3 HTML
4 3.2.3固定メッシュレイアウトかフローメッシュレイアウトか
1 // , ：
2 // 1. ( );
3 // 2. , , ;3.3 Blueprintの使用
1 // Blueprint / CSS , ;
2 // Blueprint
3 C:\Users\DELL>gem install compass-blueprint3.3.2 CompassアプリケーションBlueprintの使用
1 // Blueprint
2 C:\Users\DELL>compass create simple --using blueprint/basic
3 directory simple/
4 directory simple/images/
5 directory simple/sass/
6 directory simple/sass/partials/
7 directory simple/stylesheets/
8 create simple/config.rb
9 create simple/sass/screen.scss
10 create simple/sass/partials/_base.scss
11 create simple/sass/print.scss
12 create simple/sass/ie.scss
13 create simple/images/grid.png
14 write simple/stylesheets/ie.css
15 write simple/stylesheets/print.css
16 write simple/stylesheets/screen.css
17
18 // screen.scss ↓↓↓↓↓↓↓↓↓↓:
19 // This import applies a global reset to any page that imports this stylesheet.
20 @import "blueprint/reset"; // Blueprint ;
21
22 // To configure blueprint, edit the partials/_base.sass file.
23 @import "partials/base"; // ;
24
25 // Import all the default blueprint modules so that we can access their mixins.
26 @import "blueprint"; // Blueprint ;
27
28 // Import the non-default scaffolding module.
29 @import "blueprint/scaffolding"; // ;
30
31 // Generate the blueprint framework according to your configuration:
32 @include blueprint; // ;
33
34 @include blueprint-scaffolding; // Blueprint ;3.3.3 Compassアプリケーションを使用してクラス名を必要としないBlueprint
1 C:\Users\DELL>compass create simple --using blueprint/semantic
2
3 Sass:
4 #container {
5 @include container; 6 }
7 CSS:
8 #container {
9 width: 950px; 10 margin: 0 auto; 11 overflow: hidden; 12 *zoom: 1; 13 }3.4 960メッシュレイアウトシステムの使用
1 // 960 ;
2 C:\Users\DELL>gem install compass-960-plugin 3
4 // 960 Compass
5 C:\Users\DELL>compass create -r ninesixty twelve_col --using 960
6 directory twelve_col/
7 directory twelve_col/sass/
8 directory twelve_col/stylesheets/
9 create twelve_col/config.rb
10 create twelve_col/sass/grid.scss
11 create twelve_col/sass/text.scss
12 write twelve_col/stylesheets/grid.css
13 write twelve_col/stylesheets/text.css3.5垂直リズムをCompassで処理する
1 @import "compass/typography"; // ;
2 $base-font-size:16px; // ;
3 $base-line-height:24px;
4 @include establish-baseline; 5 h1 { @include adjust-font-size-to(48px); }3.5.2前置と後置
1 // leader ;
2 // trailer ;
3 p { @include leader; @include trailer; }
4 Sass:
5 p {
6 @include leader;
7 @include trailer;
8 }
9 CSS:
10 p {
11 margin-top: 1.5em;
12 margin-bottom: 1.5em;
13 }3.6まとめ
1 // CSS ;
2 // CSS , ;第四章コンパスがあって退屈しない
//Compassを使用してブラウザのデフォルトスタイルをリセットします.
//スタイルシートのレイアウトを改善するCompassアシスタント;
//Compassを使用して、粘着したフッター/多様なテーブルおよびフローティングを作成します.
4.1.1グローバルスタイルのリセット--global-reset
4.1.2より的確なスタイルリセットによる制御
1 @import "compass/reset/utilities";
2 >1.HTML5 --@include reset-html5 3 >2.Compass
4 >>1.reset-box-model: ;
5 >>2.reset-font: ;
6 >>3.reset-focus: ;
7 >>4.reset-table reset-table-cell: ;
8 >>5.reset-quotation: <blockquotes> ;4.2迅速かつ直感的なレイアウト支援ツール
4.2.1リンク補助ツール
1 >1. ;
2 a { @include link-colors(#333,#00f,#f00,#555,#f00); }
3 >2. hover-link ( ); 4 a { @include hover-link }
5 >3. unstyled-link ( / / ); 6 p.secret a { @include unstyled-link }4.2.2リスト補助ツール--様々なリストを作成する
1 >1. pretty-bullets ( )
2 ul.features {
3 @include pretty-bullets('pretty-bullet.png'); 4 }
5 >2. no-bullet no-bullets
6 li.no-bullet { @include no-bullet } // li no-bullet ;
7 ul.no-bullet { @include no-bullets } // ;
8 >3.
9 // horizontal-list :$padding( ) $direction( );
10 ul.nav { @include horizontal-list }
11 ul.nav { @include horizontal-list(7px,right) } // ;
12 >4. inline-list
13 ul.words { @include delimited-list } // ;
14 ul.words { @include delimited-list("!") } // ;4.2.3テキスト補助ツール--補助ツールで文字を征服する
1 >1. (text-overflow:ellipsis);
2 td.dot { @include ellipsis; }
3 >2. nowrap 4 td { @include nowrap }
5 >3. replace-text 6 h1.coffee { @include replace-text("coffee-header.png") }4.3レイアウト補助ツール
4.3.1粘着したフッター
//高さ40 pxのフッターを生成し、常に一番下にあります.
1 @include sticky-footer { 40px, "#content", "#footer", "#sticky-footer"};4.3.2伸張性元素
//要素絶対位置決め、距離境界5 px;
1 // stretch 4 :$offset-top/$offset-right/$offset-bottom/$offset-left;
2 a.logo { @include stretch(5px,5px,5px,5px) }4.4まとめ
//本章では、Compassの時間と労力を節約するツールについて理解しました.
//含む:リンク/リスト/テキスト/レイアウト;
第五章CompassによるCSS 3の使用
//CompassのCSS 3モジュールでブラウザ間CSS 3スタイルシートを作成する
//低バージョンIEでいくつかのCSS 3の特性をサポートする
//CompassのCSS 3上級スキル
5.1新属性:ブラウザ接頭辞
1 // CSS3
2 @import "compass/css3"; 3 Sass:
4 .notice {
5 @include border-radius(5px);
6 }
7 CSS:
8 .notice {
9 -moz-border-radius: 5px;
10 -webkit-border-radius: 5px;
11 border-radius: 5px;
12 }5.2 CompassによるCSS 3の使用
5.2.1フィレット
1 button.rounded {
2 @include border-radius (5px); 3 }5.2.2 CSS 3シャドウ--text-shadowとbox-shadow
1 Sass:
2 $shadow-1:rgba(#000,.5) -200px 0 0;
3 $shadow-2:rgba(#000,.3) -400px 0 0;
4 h2 {
5 @include box-shadow($shadow-1); 6 @include text-shadow($shadow-1,$shadow-2); 7 }
8 CSS:
9 h2 {
10 -moz-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
11 -webkit-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
12 box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
13 text-shadow: rgba(0, 0, 0, 0.5) -200px 0 0, rgba(0, 0, 0, 0.3) -400px 0 0;
14 }5.2.3色のグラデーション
1 #pattern {
2 @include background( 3 linear-gradient(
4 360deg,
5 #bfbfbf 0%,
6 #bfbfbf 12.5%
7 #bfbf00 12.5%,
8 #bfbf00 25%,
9 ...
10 )
11 );
12 width:400px;
13 height:300px;
14 }5.2.4@font-faceでフォントを埋め込む
1 @include font-face ("ChunkFiveRegular",
2 font-files("ChunkFiveRegular-webfont.woff",woff,
3 "ChunkFiveRegular-webfont.woff",ttf,
4 "ChunkFiveRegular-webfont.woff",svg,
5 "ChunkFiveRegular-webfont.woff",normal,normal));5.4まとめ
//CSS 3ミキサーで実現:フィレット/シャドウ/グラデーション及び文字導入;