En el siguiente CSS tomado de Twitter Bootstrap ¿qué hace el signo de y comercial (&) carácter significa?

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
  • En Sass y Less, la & es una referencia a la matriz de selección.
InformationsquelleAutor neodymium | 2012-11-28

3 Comentarios

  1. 78

    Que MENOS, no CSS.

    Esta sintaxis permite nido nido selector de modificadores.

    .clearfix { 
      &:before {
        content: '';
      }
    }

    Compilará a:

    .clearfix:before {
      content: '';
    }

    Con el &, los selectores anidados compilar para .clearfix:before.

    Sin ella, no compilar para .clearfix :before.

    • Sólo me preguntaba – ¿cómo está usted seguro de que no SASS/SECS?
    • Manos a la obra está escrita en MENOS, no SASS
  2. 12

    Anidada & selecciona el elemento principal en ambos SASS y LESS. No es solo para los pseudo elementos, puede ser utilizado con cualquier tipo de selector.

    por ejemplo,

    h1 {
        &.class {
    
        }
    }

    es equivalente a:

    h1.class {
    
    }
    • Sí @anthonygore, estoy de acuerdo con usted.
  3. 2
    In SCSS & LESS 
    
    a {
       text-decoration: underline; 
       @include padding(15px);
       display: inline-block;
    
         & img  {
                    padding-left: 7px;
                   margin-top: -4px;
                 }
     }
    
    
    is Equal to in CSS :
    
    a {
      text-decoration: underline; 
      @include padding(15px);
      display: inline-block;
    }
    
    a img  {
         padding-left: 7px;
         margin-top: -4px;
       }

Dejar respuesta

Please enter your comment!
Please enter your name here