(2) SassとCompass_html/css_WEB-ITnoseを実戦で使用する

第 3 章 計算なしで CSS グリッド レイアウトを操作する

3.1 グリッド レイアウトの概要

3.2 グリッド レイアウトの使用方法

3.2.1 用語

1 术语名             定义                      是否涉及HTML标签2 列           内容度量的垂直单位                    否3 容器         构成一个网格布局的HTML元素             是4 槽           网格布局中列与列之间的统一留白          否

3.2.3 固定グリッド レイアウトまたは流動グリッド レイアウト

リーリー

3.3 ブループリントの使用

1 // 由于网络用户的屏幕尺寸不一,设计人员有两种选择：2 // 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出);3 // 2.要么实现一种灵活的<strong>流动布局</strong>,让内容自适应用户的屏幕,甚至当浏览器窗口大小改变时也会自适应;

3.3.2 Compass を使用したブループリントの適用

1 // Blueprint把一些通用的对网格布局/段落和表格进行样式修饰的CSS技术打包到一个<strong>框架</strong>中,然后可以在各个项目中通用这个框架;2 // 安装Blueprint3 C:\Users\DELL><strong>gem install compass-blueprint</strong>

3.3.3 Compass を使用したクラス名なしのブループリントの適用

 1 // 创建一个基本的Blueprint项目 2 C:\Users\DELL><strong>compass create simple --using blueprint/basic</strong> 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.scss10    create simple/sass/partials/_base.scss11    create simple/sass/print.scss12    create simple/sass/ie.scss13    create simple/images/grid.png14     write simple/stylesheets/ie.css15     write simple/stylesheets/print.css16     write simple/stylesheets/screen.css17 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";                //<strong> 网格布局设置</strong>;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";        //<strong> 引入脚手架</strong>;30 31     // Generate the blueprint framework according to your configuration:32     @include blueprint;                     //<strong> 生成网格布局</strong>;33 34     @include blueprint-scaffolding;         //<strong> 表单和其他Blueprint元件;</strong>

3.4 960 グリッド レイアウト システムの使用

 1 C:\Users\DELL>compass create simple --using blueprint/semantic 2  3 Sass: 4     #container { 5 <strong> @include container; </strong> 6     } 7 CSS: 8     #container { 9 <strong> width: 950px; 10       margin: 0 auto; 11  overflow: hidden; 12       *zoom: 1; </strong>13     }

3.5 縦のリズムCompass による処理

 1 // 安装960系统; 2 C:\Users\DELL><strong>gem install compass-960-plugin </strong> 3  4 // 创建一个960网格系统的Compass项目 5 C:\Users\DELL><strong>compass create -r ninesixty twelve_col --using 960</strong> 6 directory twelve_col/ 7 directory twelve_col/sass/ 8 directory twelve_col/stylesheets/ 9    create twelve_col/config.rb10    create twelve_col/sass/grid.scss11    create twelve_col/sass/text.scss12     write twelve_col/stylesheets/grid.css13     write twelve_col/stylesheets/text.css

3.5.2 事前および事後

1 @import "compass/typography";       //<strong> 引入段落模块</strong>;2 $base-font-size:16px;               // 声明字体大小;3 $base-line-height:24px;4 <strong>@include establish-baseline; </strong>5 h1 { @include adjust-font-size-to(48px); }

3.6 概要

 1 //<strong> leader混合器在元素前加一个基线单位的外间距</strong>; 2 //<strong> trailer混合器在元素的后边加了一个基线单位的外间距;</strong> 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     }

Compass を使用すると、第 4 章はもう退屈ではなくなります

/ / ブラウザのデフォルトスタイルをリセットするためのコンパス;

// スタイルシートのレイアウトを改善するためのコンパスヘルパー

// スティッキーフッター/多様なテーブルとフロートを作成するためにコンパスを使用します

4.1.1 グローバルスタイルのリセット --global-reset

4.1.2 ターゲットを絞ったスタイルでのより詳細な制御リセット

1 // 流行的CSS网格框架如何简化维护留白和快速构建原型设计;2 // 通过添加一些CSS类,就可以创建彼此之间有统一间距的竖列内容;

4.2 より高速で直感的なタイポグラフィ補助

4.2.1 リンク補助

1 @import "compass/reset/utilities";2 >1.<strong>HTML5样式重置--@include reset-html5 </strong>3 >2.Compass文档中更多的样式重置4     >>1.<strong>reset-box-</strong><strong>model:移除元素的内边距和边框</strong>;5     >>2.<strong>reset-</strong><strong>font:重置文字的字号和基线</strong>;6     >>3.<strong>reset-</strong><strong>focus:移除浏览器提供的轮廓线</strong>;7     >>4.<strong>reset-table和reset-table-</strong><strong>cell:重置表格的边框和对齐方式</strong>;8     >>5.<strong>reset-quotation:为<blockquotes>添加仅存在于样式表中的双引号</strong>;

4.2.2 リスト補助 -- さまざまなリストの作成

1 >1.<strong>为链接配色</strong>;2     a { @include <strong>link-colors</strong>(#333,#00f,#f00,#555,#f00); }3 >2.<strong>通过hover-link设置悬停样式(设置下划线); </strong>4     a { @include <strong>hover-</strong><strong>link</strong> }5 >3.<strong>通过unstyled-link设置隐性的链接(去掉颜色/光标样式/下划线); </strong>6     p.secret a { @include unstyled-link }

4.2.3補助 -- テキストを征服するaids

 1 >1.<strong>用pretty-</strong><strong>bullets装点列表</strong>(利用背景图片显示列表的项目符号) 2     ul.features { 3         @include <strong>pretty-bullets('pretty-bullet.png'); </strong> 4     } 5 >2.通过no-bullet和no-bullets去掉项目符号 6     li.no-bullet { <strong>@include no-bullet</strong> }             //<strong> 去掉li类no-bullet的符号;</strong> 7     ul.no-bullet { <strong>@include no-bullets</strong> }            //<strong> 去掉整个列表的项目符号;</strong> 8 >3.轻松横向排布 9     // horizontal-list混合器有两个参数:$padding(内边距)和$direction(浮动方向);10     ul.nav { @include <strong>horizontal-</strong><strong>list</strong> }　　　　　　11     ul.nav { @include <strong>horizontal-</strong><strong>list(7px,right)</strong> }　// 列表水平排列;12 >4.用inline-list处理内联列表13     ul.words { @include <strong>delimited-list</strong> }            //<strong> 将列表设置成内联的样式;</strong>14     ul.words { @include <strong>delimited-list("!")</strong> }       //<strong> 自定义分隔符</strong>;

4.3 レイアウト補助

4.3.1 スティッキーフッター

// 高さ 40px で常に下部にあるフッターを生成します

1 ><strong>1.用省略号代表截断内容</strong>(text-overflow:ellipsis);2     td.dot { <strong>@include ellipsis;</strong> }3 ><strong>2.用nowrap防止文本折行 </strong>4     td { <strong>@include nowrap</strong> }5 >3<strong>.用replace-text将文字替换图片 </strong>6     h1.coffee { <strong>@include replace-text("coffee-header.png")</strong> }

4.3.2 伸縮可能な要素

// 要素境界線から 5 ピクセルの位置に絶対配置されます。

1 @include sticky-footer { 40px, "#content", "#footer", "#sticky-footer"};

4.4 概要

// この章では、Compass の時間節約ツールと労力節約ツールについて学びました

// 以下を含みます。レイアウト;

第 5 章 Compass で CSS3 を使用する

// Compass を使用する CSS3 モジュールは、クロスブラウザー CSS3 スタイル シートを作成します

// 以前のバージョンの IE で一部の CSS3 機能をサポートします

// Compass の CSS3 高度なスキル

5.1 新しい属性: ブラウザプレフィックス

1 // stretch混合器有4个参数:$offset-top/$offset-right/$offset-bottom/$offset-left;2 a.logo { @include stretch(5px,5px,5px,5px) }

5.2 Compass での CSS3 の使用

5.2.1 丸い角

 1 // 引入CSS3模块 2 <strong>@import "compass/css3"; </strong> 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.2 CSS3 シャドウ -- text-shadow および box-shadow

りー

5.2 .3 カラーグラデーション

1 button.rounded {2     <strong>@include border-radius (5px); </strong>3 }

5.2.4 @font-face 埋め込みフォントの使用

 1 Sass: 2     $shadow-1:rgba(#000,.5) -200px 0 0; 3     $shadow-2:rgba(#000,.3) -400px 0 0; 4     h2 { 5         <strong>@include box-shadow($shadow-1); </strong> 6         <strong>@include text-shadow($shadow-1,$shadow-2); </strong> 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.4 概要

// CSS3 ミキサーを使用して以下を実現します:

角丸 / シャド​​ウ / グラデーションとテキスト紹介