Sass / SCSS Mixin pour Clearfix - meilleure approche?

Je veux enlever l' clearfix classe à partir de mon code HTML et comprennent un clearfix mixin dans mon SCSS (application Rails 3.1). Quelle est la meilleure approche?

Je pense juste prendre le HTML 5 Standard clearfix et le transformer en un mixin, @y compris dans le CSS pour les éléments qui doivent clearfixing.

Copié à partir de HTML5 Boilerplate:

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "
/* 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; }
20"; 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; }

Est-il un inconvénient à cela? Est-il un meilleur moyen? Puis-je retirer en toute sécurité clearfix de mon balisage HTML de cette façon?

source d'informationauteur Richard Jordan

  1. 31

    Je devrais probablement avoir ajouté - c'est la solution que j'ai trouvé. Je suis encore assez nouveau dans tout cela, donc je ne sais pas si ce sera effectivement faire le même travail comme un élément de la classe à clearfix et en utilisant le HTML5 boilerplate code ci-dessus.

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

    Edit:
    Il est préférable d'utiliser @extend au lieu d'un mixin car cela permet de produire beaucoup moins de code CSS.
    Aussi, il est utile d'utiliser un silencieux classe (notée par %) lors de l'utilisation de @extend. Cela empêche inattendu règles CSS et élimine la règle que vous êtes l'extension si c'est n'étant pas utilisé directement. 

    %clearfix {
    zoom:1;
    &:before, &:after {
        content: "
    %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;
}
    20"    ;
        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;
}
  2. 12

    Pour atteindre moins de code à l'aide de @extenddéfinir clearfix comme espace réservé (ici juste pour les navigateurs modernes w/o IE 6+7):

    Sass code:

    %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 sortie sera:

    #container:after {
    content: " ";
    display: block;
    clear: both;
}
#container {
    position: relative;
    min-width: 42.5em;
}
  3. 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;
      }
    }
  4. 2

    Pourquoi ne pas utiliser le Compas cadre? Il fournit déjà mixin pour clearfix parmi une foule d'autres mixin et des services publics. Il est toujours préférable de regarder pour les outils existants plutôt que d'avoir à maintenir un code supplémentaire de vous-même.