Was bedeutet das kaufmännische Und (&) im folgenden CSS aus Twitter Bootstrap ?
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
Was bedeutet das kaufmännische Und (&) im folgenden CSS aus Twitter Bootstrap ?
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
Antworten:
Das ist WENIGER , nicht CSS.
Mit dieser Syntax können Sie Nest-Selektor-Modifikatoren verschachteln.
.clearfix {
&:before {
content: '';
}
}
Wird kompiliert zu:
.clearfix:before {
content: '';
}
Mit dem &
kompilieren die verschachtelten Selektoren zu .clearfix:before
.
Ohne sie kompilieren sie zu .clearfix :before
.
Ein verschachteltes &
Element wählt das übergeordnete Element in SASS und LESS aus. Es ist nicht nur für Pseudoelemente, es kann mit jeder Art von Selektor verwendet werden.
z.B
h1 {
&.class {
}
}
ist äquivalent zu:
h1.class {
}
Hier ist ein SCSS / LESS-Beispiel:
a {
text-decoration: underline;
@include padding(15px);
display: inline-block;
& img {
padding-left: 7px;
margin-top: -4px;
}
}
und sein Äquivalent in CSS:
a {
text-decoration: underline;
@include padding(15px);
display: inline-block;
}
a img {
padding-left: 7px;
margin-top: -4px;
}
&
ein Verweis auf den übergeordneten Selektor.