0

クラスが同じ CSS 属性を共有する場合、以前は SASS がなくても、以下のように簡単にグループ化できました。

.header, .content, .footer {
   height:100%;

}

しかし、SASS/SCSS などを使用すると、スタイルの管理が非常に簡単になります。したがって、質問には、以下のミックスインを考慮した CSS パフォーマンスの考慮事項が与えられます

@mixin sameHeight{  
   height:100%;
}

実装は

.content {
  @include sameHeight; 
}

.footer {
  @include sameHeight; 
}

.header {
  @include sameHeight; 
}

/* CSS OUTPUT */

  .header {
       height:100%;

 }

  .content{
       height:100%;
 }

  .footer{
       height:100%;
 }

それともそうあるべきか

.header, .content, .footer {
   @include sameHeight; 

}

/* CSS OUTPUT */
.header, .content, .footer {
       height:100%;   
}
4

1 に答える 1

0

パフォーマンスの違いについてはよくわかりません。異なる構造がサーバーのパフォーマンスを実際に変えることはありませんでした。自分でテストする必要があるかもしれません。

CSSで何度も同じことを書くと、ファイルが大きくなります...そして大きなファイラー=読み込みとレンダリングに少し時間がかかります。そして一般的に、冗長性を避けるように努めるべきです。

しかし、構造は、ファイル全体がどのように構成されているか、および同じクラスで他に何をしたいかによって大きく異なると思います。

@extendまた、次のようなことを行うことで同じことを達成できる を調べることもできます。

@mixin sameHeight{  
   height:100%;
}
.header {
   @include sameHeight; 
}
.content {
   @extend .header;
}
.footer {
   @extend .content;
}

しかし、私が言ったように...それはすべて、物事に対して実行したい操作と、ルールにプロパティを継承させる方法に依存します。

最後に、プリプロセッサはほとんどの場合、スタイルを簡単に設定できるようにします。

編集: CSS のパフォーマンス テストについては、Andy のストレス テストを試すことができます。

于 2013-05-13T14:29:01.290 に答える