sitios - ¿Qué significa un "y" antes de un pseudo elemento en CSS?

que es la accesibilidad web universal

Question

En el siguiente CSS tomado de Twitter Bootstrap, ¿qué significa el carácter ampersand (&)?

.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}

Answer 1

Eso es MENOS , no CSS.

Esta sintaxis le permite anidar modificadores de selector de nido.

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

Compilará a:

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

Con el .clearfix:before & , los selectores anidados se compilan para .clearfix:before .
Sin él, se compilan para .clearfix :before .

Answer 2

Un anidado & selecciona el elemento padre tanto en SASS como en LESS. No es solo para pseudo elementos, se puede usar con cualquier tipo de selector.

p.ej

h1 {
&.class {
}
}

es equivalente a:

h1.class {
}

Answer 3

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;
}