(1) Sass と Compass_html/css_WEB-ITnose を理解する

第 1 章 Sass と Compass でスタイル シートを若返らせる

// 内容の概要
// Sass と動的スタイル シートの学習を開始する
// Sass を使用してスタイル シートをより効率的に作成する
// Compass の概要
// Compass を使用して、エンジニアリング実践におけるスタイルの課題に対処します

1.2.1 変数を通じて属性値を再利用します

1 声明变量:<strong>$blue:#1875e7</strong>;2 调用变量:.blue { color:<strong>$blue</strong>; }

1.2.2 ネストを通じてマルチレベルセレクターを素早く作成します

1 ul{2     float:right;3     li {4         float:left;5         a{ color:#111; }6     }7 }

1.2.3 ミキサーを使用してスタイルを再利用します

 1 <strong>@mixin list</strong> { 2     li { 3         float:left; 4         margin-right:10px; 5     } 6 } 7 ul { 8 <strong> @include list</strong>; 9 }10 11 // 在混合器中应用变量12 @mixin list(<strong>$spacing:10px</strong>) {　　13     li {14         float:left;15         margin-right:<strong>$spacing</strong>;16     }17 }

1.2.4 属性の重複を避けるためにセレクターの継承を使用する

 1 .error { 2     border:1px #f00; 3     background:#fdd; 4 } 5 .bacError { 6 <strong> @extend .error;　　　　// 继承选择器里的内容 </strong> 7     border-width:3px; 8 } 9 10 //<strong> 在选择器中使用占位选择器</strong>11 Sass:12     %button-reset {　　　　<strong>// 占位选择器; </strong>13         margin:0;14         padding:.5em 1.2em;15     }16     .save {17         <strong>@extend %button-reset;　　// 继承占位选择器里的内容; </strong>18         color:white;19     }20     .delete {21         <strong>@extend %button-reset; </strong>22         color:black;23     }24 CSS:25     .save,.delete {26         margin:0;27         padding:.5em 1.2em;28     }

1.3 Compass とは

// Compass は 強力な Sass フレームワーク であり、その設計目標 インターネットを装飾するためのスムーズで効率的な方法です

1.4 Compass プロジェクトを作成します

// コンピューターに Ruby 環境がインストールされていて、Sass と Compass がインストールされていることを確認してください

1 $ <strong>compass create sample</strong>

1.5 Compass を使用して実際の問題を解決しますCSS の問題

// 次に、Compass の 組み込みモジュール (Sass 関数とその他の機能の組み合わせ) を使用して、CSS リセット、グリッド レイアウト、テーブルの書式設定と CSS3 のいくつかの機能

1.5.1 を実装します。リセットして一貫したスタイルのパフォーマンスを維持する

1 (1).<strong>@import "compass/reset"</strong>2 //<strong> 通过Sass引入命令@import引入Compass的重置模块;</strong>3 // reset模块是<strong>Compass框架中独立的一部分</strong>,<strong>可被随意引用到项目中;</strong>4 // 通过加入这行代码,<strong>生成的CSS文件中就会包含CSS重置部分的代码;</strong>5 6 (2).<strong>@include reset-html5 </strong>7 // 输出文件中会<strong>生成额外的CSS规则来对HTML5的元素进行基本的样式修改</strong>,

1.5.2 基本レイアウトの導入 - ブループリント グリッド レイアウト

1 $ compass create my_grid --using blueprint2 // 创建的my_grid工程里,<strong>screen.scss文件内容会添加一系列基本布局的样式在里边;</strong>3 // 而且不必在HTML标签添加"span-*"的类名,而是使用Sass的column混合器;4 <strong>@include column($sidebar-columns); </strong>5 // 详细内容见第六章;

1.5.3 テーブル ヘルパーを使用してテーブルを提供する よりプロフェッショナルなゼブラ ストライプ スタイルを追加する

1 @import "compass/utilities/tables";2 table {3     $table-color:#666;                                          // 定义变量;4     @include table-scaffolding;                                 // 引入混合器;<strong>提供最基本的样式修饰</strong>;5     @include inner-table-borders(1px, darken($table-color,40%));//<strong> 添加单元格边框</strong>;6     @include outer-table-borders(2px);                          //<strong> 添加表格边框</strong>;7     @include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222);  //<strong> 添加斑马条纹样式</strong>;8 }

1.5 。 4 CSS3 プロパティはベンダープレフィックスを記述する必要がなくなりました

 1 <strong>@import "compass/css3"</strong> 2 Sass: 3     .rounded { 4         @include border-radius(5px); 5     } 6 CSS: 7     .rounded { 8         -moz-border-radius: 5px; 9         -webkit-border-radius: 5px;10         -o-border-radius: 5px;11         -ms-border-radius: 5px;12         border-radius: 5px;13     }

1.6 概要

//CSS の前処理の例を学び、Sass 4 の主要な機能を簡単に紹介しました: 変数、セレクターネスティング、ミキサー、Selectまたは継承。
//同時に、CSSリセット、フォーマットレイアウト、テーブルスタイルの変更、CSS3ボーダーの角丸化など、CompassフレームワークのいくつかのSass機能を実際のプログラムに適用する方法についても学びました。 。

第 2 章 基本的な Sass 構文

// 内容の概要
// 変数を通じて色、長さ、その他の値を再利用する
// ルールのネストを通じて CSS をより構造化する
// 複数のファイルを整理するスタイルがより保守しやすくなります
// ミキサーと継承でスタイル全体を再利用します 2.1 変数の使用

// Sass は変数を識別するために $ 記号を使用します

2.1.1 変数の宣言

1 $nav-color:#abc;            //<strong> 外部变量</strong>;2 nav {3     $width:100px;           //<strong> 内部变量;</strong>4     width:$width;5     color:$nav-color;6 }

2.1 2 変数参照

1 //<strong> 当声明变量时,变量值也可以引用其他变量;</strong>2 $highlight-color:#abc;3 $highlight-border:1px $highlight-color solid;4 .seleted { border:$highlight-border; }

2.2 ネストされた CSS ルール

1 #content {2     article {3         h1 {color:#333;}4         p {margin:1em;}5     }6 }

2.2.1

親セレクターの識別子&

 1 Sass: 2     a { 3         color:blue; 4         &:hover {color:red;} 5     } 6 CSS: 7     a { 8         color:blue; 9     }10     a:hover {11         color:red;12     }

2.2.2 グループセレクターのネスト

1 .container {2     h1,h2,h3 {margin-bottom:2em;}3 }

2.2.3 サブコンビネーションセレクターと同レベル組み合わせセレクター: >、+、~

1 // 选择器只会选择article下紧跟着的子元素中命中section选择器的元素;2 article > section {border:1px solid #ccc;}3 // 选择header元素后紧跟的p元素;4 header+p {font-size:1.1em;}5 // 选择所有跟在article后的同层article元素;6 article ~ article {border:none;}

2.2.4 ネストされたプロパティ

1 nav {2     border: {　　　　　　// <strong>将属性拆开; </strong>3         style:solid;4         width:1px;5         color:#ccc;6     }7 }

2.3 Sass ファイルのインポート

// Sass の

@import ルール CSS ファイルの生成時に関連ファイルがインポートされます

// 関連するすべてのスタイルは、追加のダウンロード要求を開始する必要なく、同じ CSS ファイルにまとめられます。
// すべてはインポートされたファイルで定義されます。 変数とミキサーはインポート ファイルで使用できます。
2.3.1 Sass パーシャルの使用ファイル

1 //<strong> Sass局部文件的文件名以下划线开头</strong>。这样,Sass就不会在编译时单独编译这个文件输出CSS,而只把这个文件用作导入;2 <strong>@import "themes/night-sky";</strong>

2.3.2 デフォルト設定

1 // !default : 如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。2 $box-width:400px !default;      // 如果变量"$box-width"之前没有被赋值,则使用"400px";3 .box {4     width:$box-width;5 }

2.3.3 ネストされたインポート

1 Sass:2 _blue-theme.scss:3     aside{4         color:white;5     }6     .blue-theme { @import "blue-theme" }　　// 引入_blue-theme.scss文件;7 CSS:8     .blue-theme { 　　　　　　aside { color:white; }　　　　}

2.3.4 ネイティブ CSS インポート

// 1. インポートされたファイルの名前ファイルは .css で終わります。

// 2. インポートされたファイルの名前は URL アドレスです。

// 3. インポートされたファイルの名前は CSS の url() 値です

2.4 サイレントコメント

// この種のコメントコンテンツは生成された CSS ファイルには表示されません

/* この種のコメント コンテンツは生成された CSS ファイルに表示されます* /

2.5 Mixer

 1 //<strong> 混合器使用@mixin标识符定义;</strong> 2 //<strong> 这个标识符给一段样式赋予一个名字</strong>,<strong>这样就可以通过"@include"引用这个名字重用这段样式</strong>; 3 //<strong> @include调用会把混合器中的所有样式提取出来放在@include被调用的地方</strong>; 4 Sass: 5     @mixin rounded { 6         -moz-border-radius:5px; 7         -webkit-border-radius:5px; 8         border-radius:5px; 9     }10     .notice {11         @include rounded;12     }13 CSS:14     .notice {15         -moz-border-radius:5px;16         -webkit-border-radius:5px;17         border-radius:5px;18     }

2.5.1 mixer

1 // 判断一组属性是否应该合成一个混合器;一条经验法则就是能否为这个混合器想出一个合理的名字;2 // 混合器和CSS类的区别:3 // 1.<strong>类名在HTML文件中应用;具有语义化;</strong>4 // 2.<strong>混合器是在样式表中应用的;具有展示性;</strong>

2.5 を使用する場合。 2 mixer の CSS ルール

 1 // 当一个包含CSS规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则; 2 Sass: 3     @mixin no-bullets { 4         list-style:none; 5         li { 6             list-style-type:none; 7             margin-left:0px; 8         } 9     }10     ul {11         color:#333;12         @include no-bullets;13     }14 CSS:15     ul {16         color:#333;17         list-style:none;　　　　// 混合器中的属性;18     }19     ul li {20         list-style-type:none;21         margin-left:0px;22     }

2.5.3 mixer にパラメータを渡す

 1 Sass: 2     @mixin link-colors(<strong>$normal,$hover,$visited</strong>){ 3         color:$normal; 4         &:hover { color:<strong>$hover;</strong> } 5         &:visited { color:<strong>$visited;</strong> } 6     } 7     a { 8         @include link-colors(blue,red,green); 9     }10     Or11     a {12         @include link-colors(13             $normal:blue,14             $visited:green;15             $hover:red16         );17     }18 CSS:19     a { color:blue; }20     a:hover { color:red; }21     a:visited { color:green;}

2.5.4 デフォルトのパラメータ値

1 @mixin link-colors ($normal,<strong>$hover:$normal</strong>,<strong>$visited:$normal</strong>){2     color:$normal;3     &:hover { color:$hover; }4     &:visited { color:$visited; }5 }

2.6 セレクターの継承を使用して CSS を効率化する

れーれー

2.6.1継承を使用する場合

// 継承はクラス (場合によっては他のタイプのセレクター) ) に基づいているため、

継承は意味論的な関係に基づいている必要があります

;

2.6.2 继承的高级用法 

// 如果一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式;

2.6.3 继承的工作细节

1 // 继承不是仅仅用CSS样式替换@extend处的代码那么简单;2 // >1.<strong>跟混合器相比,继承生成的CSS代码相对更少</strong>;3 // >2.<strong>继承遵从CSS层叠的规则;(权重和出现的先后顺序)</strong>;

2.6.4 使用继承的最佳实践

// 使用继承会让你的CSS美观/整洁;因为继承只会在生成CSS时复制选择器,而不会复制大段的CSS属性;

2.7 小结

 1 // 1.变量是Sass提供的最基本的工具; 3 //<strong> 通过变量可以让独立的CSS值变得可复用</strong>;无论是在一条单独的规则范围内还是在整个样式表中; 5 // 变量/混合器的命名甚至Sass的文件名,可以互换通用"_"和"-"; 6  7 // 2.<strong>嵌套允许CSS规则内嵌套CSS规则</strong>,减少重复编写常用的选择器,同样让样式表的结构更清晰; 9 // 同时提供了特殊的父选择器标识符"&",从而构造更高效的嵌套;10 11 // 3.<strong>通过样式导入可以把分散在多个Sass文件中的内容合并在生成的一个CSS文件</strong>,避免了项目中有大量的CSS文件通过原生的CSS@import带来的性能问题;12 13 // 4.混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复；14 15 // 5.继承允许声明类之间语义化的关系,通过这些关系可以保持CSS的整洁和可维护性;