Sass @extend または Mixin_html/css_WEB-ITnose

ここでは、SCSS における @extend と Mixin のいくつかの古典的な使用法、それぞれに適用可能なシナリオ、およびベスト プラクティスの概要を示します。

@extend 古典的な使用法

1、スタイルを継承

.message{  border:solid 1px #ddd;}.error-message{  @extend .message;  color:red;}

2、単純なセレクターを拡張可能

a:hover{  text-decoration: underline;}.hover-link{  @extend a:hover;}

3、複数の継承可能

.message{  border:solid 1px #ddd;}.error{  color:red;}.serious-error{  //@extend .message;  //@extend .error;  // 也可以逗号分隔  @extend .message, .error;  background: mediumpurple;}

4、連鎖継承可能

.message{  border:solid 1px #ddd;}.error-message{  @extend .message;  color:red;}.serious-error{  @extend .error-message;  background: mediumpurple;}

5、ネストされた関係も継承可能

.user-link{  color:skyblue;  &:hover{    text-decoration: underline;  }}.comment .link{  @extend .user-link;}

6, プレースホルダー、継承のみ可能なセレクター

%highlight{  color:red;  font-weight: bold;}.notice{  @extend %highlight;}

7, メディアクエリ命令では、外部セレクターは継承できません

// 正确用法@media print, (max-width: 700px){  %panel{    padding:0;  }  .mobile-panel{    @extend %panel  }} // 错误用法%panel{  padding:0;}@media print, (max-width: 700px){  .mobile-panel{    @extend %panel  }}// 正确用法 2@media (max-width: 700px){  %panel{    padding:0;  }}// ...@media (max-width: 700px){  .mobile-panel{    @extend %panel  }}

8, @at-root ディレクティブ、ネストのキャンセル

// 取消嵌套.list{  padding: 10px;  .item{    float:left;    @at-root{      .item-tag{  font-size: 12px;  }      .item-badge{  border-radius: 50%;  }    }  }}// 取消媒体查询的限制@media (max-width: 700px){  .mobile-link{    background:lightblue;  }  @at-root .outer-link{    background:skyblue;  }  .common-link{    @at-root (without:media){      background:deepskyblue;    }  }}

Mixin の古典的な使用法

1、再利用に重点を置いています

@mixin large-text{  font:{    size: 20px;    weight:bold;  }  color:#333;}.page-title{  @include large-text;  padding: 10px 0;  margin-bottom: 10px;}.section-title{  @include large-text;  margin:0;}

2、セレクター内で

@mixin don-not-do-this{  a{    color:pink;  }}@include don-not-do-this;

を導入することはできません

@mixin dash-border($color,$width){  border:{    color:$color;    width:$width;    style:dashed;  }}// ...p{  //@include dash-border(gray,2px);  // 更容易看清参数  @include dash-border($color:gray,$width:2px);}

3、パラメータでの使用

// ## 参数默认值@mixin dash-border($color,$width:1px){  border:{    color:$color;    width:$width;    style:dashed;  }}// ...p{  @include dash-border(gray);  //@include dash-border($color:gray,$width:2px);}// arguments@mixin box-shadow($param...){  -webkit-box-shadow: $param;  box-shadow: $param;}.box{  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);}@mixin colors($text,$bg,$border){  color:$text;  background-color:$bg;  border-color:$border;}// 列表$value_list:#333,#666,#999;.primary{  @include colors($value_list...);}// map$value_map:(text:#000,bg:#999,border:#666);.secondary{  @include colors($value_map...);}

4、単数のデフォルト値、リスト、マップ、パラメータオブジェクト

%brand-font{  font-family: webfont, sans-serif;  font-weight: 700;}// ... 三个点代表一百行代码h1{  @extend %brand-font;  font-size: 2em;}// ....btn{  @extend %brand-font;  display: inline-block;  padding: 1em;}// ....promotion{  @extend %brand-font;  background: #bada55;  color:#FFF;}// ....footer-message{  @extend %brand-font;  font-size: 0.75em;}

間違った使用法

1 、不適切な関連付け

// source 264字节 css 299字节%bold {  font-weight: bold;}//....header--home > .header__tagline {  @extend %bold;  color: #333;  font-style: italic;}//....btn--warning {  @extend %bold;  background-color: red;  color: white;}//....alert--error > .alert__text {  @extend %bold;  color: red;}

2、過剰な抽象化

// 这时候应该用 Mixin@mixin webfont() {  font-family: webfont, sans-serif;  font-weight: 700;}//....foo {  @include webfont();}//....bar {  @include webfont();}//....baz {  @include webfont();}

.contact-text{  font-weight: bold;}.tos{  @extend .contact-text;}.foot .contact-text{  color:darkgray;}// 期望结果是这样么?  .contact-text, .tos {    font-weight: bold;  }  .foot .contact-text {    color: darkgray;  }// 实际结果却是  .contact-text, .tos {    font-weight: bold;  }  .foot .contact-text, .foot .tos {    color: darkgray;  }

3、マルチレベルのネストされた継承

rrreee

正しい使い方

1. 論理的な関連付けのないコンテンツ、@extend を使用しないでください、Mixin を使用してください
@extend を使用する場合は、ネストせずに %placeholder を使用するには
階層関係を継承するときは、@extend
3. を使用してください
sass simple を保つ

考え方

1. DRY 原則 (同じことを繰り返さない)

同じことを繰り返さない: 防ぐためではありません繰り返します (繰り返さないでください) が、ソースが 1 つだけであることを保証するために、ソース コードは 1 か所にのみ表示され、1 つの変更はすべての CSS ファイルに自動的に同期されます。 CSS では、マシンによって自動的にコピーされた繰り返しは DRY 原則に違反しません。

2. パフォーマンスに関する考慮事項

gzip を有効にすると、Mixin はより多くの繰り返しとより大きなファイルを含む CSS ファイルを生成し、圧縮後のパフォーマンスが向上することがテストで証明されています。

付録

CSS セレクターの分類 https://drafts.c​​sswg.org/selectors-4/#syntax

4095 セレクターのバグ http://blogs.msdn.com/b/ieinternals/archive/2011/ 05/ 14/10164546.aspx

制御不能なコードのスクリーンショット https://twitter.com/droob/status/561161783239389185 https://twitter.com/gaelmetais/status/564109775995437057