10

clearfixHTML からクラスを削除し、SCSS (Rails 3.1 アプリケーション) に clearfix mixin を含めたいと考えています。これに対する最善のアプローチは何ですか？

HTML 5 Boilerplate clearfix を取り込んで mixin に変換し、それを @include して、clearfix が必要な要素の CSS 内に含めることを考えています。

HTML5 ボイラープレートからコピー:

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin padding-bottom-of-page */
.clearfix { zoom: 1; }

これに欠点はありますか？より良い方法はありますか？この方法で HTML マークアップから clearfix を安全に削除できますか?

4

4 に答える 4

31

おそらく追加する必要がありました-これが私が思いついた解決策です。私はまだこれらすべてにかなり慣れていないので、要素のクラスを clearfix に設定し、上記の HTML5 ボイラープレート コードを使用するのと同じ仕事を実際に行うかどうかはわかりません。

@mixin clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020"; 
        display: block; 
        height: 0; 
        overflow: hidden; 
    }
    &:after {
        clear: both;
    }
}

編集:@extend生成される CSS コードがはるかに少なくなるため、mixin の代わりに 使用することをお勧めします。また、 を使用する場合は、サイレント クラス ( で示される%)を使用すると便利です@extend。これにより、予期しない CSS ルールが防止され、拡張しているルールが直接使用されていない場合は除外されます。

%clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

#head {
    @extend %clearfix;
    padding: 45px 0 14px; margin: 0 35px 0;
    border-bottom: 1px solid $border;
}
于 2011-08-22T23:18:51.967 に答える
12

を使用してコード出力を@extend減らすには、clearfix をプレースホルダーとして定義します(ここでは、IE 6+7 を使用しない最新のブラウザーのみを対象としています)。

サスコード:

%clearfix {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}

/* Use above defined placeholder in the selector(s) of your needs via @extend: */
#container {
    position: relative;
    min-width: 42.5em;
    @extend %clearfix;
}

CSS 出力は次のようになります。

#container:after {
    content: " ";
    display: block;
    clear: both;
}
#container {
    position: relative;
    min-width: 42.5em;
}
于 2013-05-23T10:18:11.950 に答える
4 
// source http://www.alistapart.com/articles/getting-started-with-sass/
// http://nicolasgallagher.com/micro-clearfix-hack/

    @mixin clearfix {
     // For modern browsers
      &:before,
      &:after {
        content:" ";
        display:table;
      }

      &:after {
        clear:both;
      }

      // For IE 6/7 (trigger hasLayout)
      & {
        *zoom:1;
      }
    }
于 2012-08-03T09:01:41.440 に答える