作者:yan雀安知鸿鹄之志_647 | 来源:互联网 | 2022-11-06 14:02
What does % indicate in scss?
Use of % in context: (source: https://codepen.io/FWeinb/pen/GrpqB?editors=1100)
@import "compass/css3";
.box{
margin: 5em auto;
position: relative;
width: 10em;
height: 10em;
line-height: 10em;
overflow: hidden;
}
%box__dir{
position: absolute;
width: inherit;
height: inherit;
text-align: center;
line-height: inherit;
transition:transform .4s ease;
}
What does the percentage sign before "box_dir" indicate?
1> Andy Hoffman..:
In SCSS
, the %
indicates a placeholder selector.
[Placeholders] are very similar to class selectors, but instead of using a
period (.
) at the start, the percent character (%
) is used.
Placeholder selectors have the additional property that they will not
show up in the generated CSS, only the selectors that extend them will
be included in the output.
So if you included this in your SCSS
somewhere but never used (extended) it, it will not appear in your generated CSS
.
%box__dir {
position:absolute;
width:inherit;
height:inherit;
text-align:center;
line-height:inherit;
transition:transform .4s ease;
}
Once you use the placeholder
, it will appear in your generated CSS
as expected.
.something {
color: red;
@extend %box__dir;
}
Generated CSS
:
.something {
color: red;
position:absolute;
width:inherit;
height:inherit;
text-align:center;
line-height:inherit;
transition:transform .4s ease;
}