In the following CSS taken from Twitter Bootstrap what does the ampersand (&) character mean?
.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; } &:after { clear: both; } } 4 Answers
That's LESS, not CSS.
This syntax allows you to nest selector modifiers.
.clearfix { &:before { content: ''; } } Will compile to:
.clearfix:before { content: ''; } With the &, the nested selectors compile to .clearfix:before.
Without it, they compile to .clearfix :before.
A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector.
e.g.
h1 { &.class { } } is equivalent to:
h1.class { } Here is an SCSS/LESS example:
a { text-decoration: underline; @include padding(15px); display: inline-block; & img { padding-left: 7px; margin-top: -4px; } } and its equivalent in CSS:
a { text-decoration: underline; @include padding(15px); display: inline-block; } a img { padding-left: 7px; margin-top: -4px; } '&' is useful feature in both Sass and Less preprocessor. For nesting it's used. It is time saver when we compare to CSS.
0
