Was bedeutet das kaufmännische Und (&) im folgenden CSS aus Twitter Bootstrap ?
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
css
twitter-bootstrap
Neodym
quelle
quelle
&
ein Verweis auf den übergeordneten Selektor.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
.quelle
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 { }
quelle
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; }
quelle