Что означает % в scss?
Использование % в контексте: (источник: 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;
}
Что означает знак процента перед «box_dir»?
В SCSS % указывает на селектор-заполнитель.
[Заполнители] очень похожи на селекторы классов, но вместо точки (
.) в начале используется символ процента (%). У селекторов-заполнителей есть дополнительное свойство: они не будут отображаться в сгенерированном CSS, в вывод будут включены только те селекторы, которые их расширяют.
Поэтому, если вы где-то включили это в свой SCSS, но никогда не использовали (расширяли) его, оно не появится в сгенерированном вами CSS.
%box__dir {
position:absolute;
width:inherit;
height:inherit;
text-align:center;
line-height:inherit;
transition:transform .4s ease;
}
Как только вы используете placeholder, он появится в вашем сгенерированном CSS, как и ожидалось.
.something {
color: red;
@extend %box__dir;
}
Создано CSS:
.something {
color: red;
position:absolute;
width:inherit;
height:inherit;
text-align:center;
line-height:inherit;
transition:transform .4s ease;
}
