Я переношу электронное приложение в приложение для веб-браузера и столкнулся с некоторыми стилями scss, которых никогда раньше не видел. Большинство селекторов используют At-правило, которое не имеет никакого смысла.
Кажется, он генерирует имена классов, но я изо всех сил пытаюсь понять, являются ли они функциями SASS или какой-либо другой библиотекой\пакетом.
все эти @b, @m не имеют для меня никакого смысла.
Я гуглил, но не смог найти лучшей информации ни в документах SCSS.
/* Text inputs */
@b textInput {
@include inputBoxStyle;
@m small, s {
padding: 0.5rem;
border-radius: 3px;
}
@m large, l {
padding: 1rem;
font-size: 1.2rem;
border-width: 2px;
border-radius: 5px;
}
@m textOnly {
background-color: transparent;
border: none;
padding: 0 !important;
}
@m invalid, invalid:focus {
border-color: $pastelPink;
}
@e hiddenInteraction:not(:hover):not(:focus):not(:active) {
@include inputHiddenInteraction;
}
}
/* Selects */
@b select {
position: relative;
select {
@include inputBoxStyle;
padding-right: 1.6rem;
appearance: none;
}
&:after {
position: absolute;
top: calc(50% - (1em / 2));
right: 1rem;
font-family: 'FontAwesome', serif;
font-size: 1rem;
line-height: 1em;
content: '\f078';
color: $ourWhite;
pointer-events: none;
}
🤔 А знаете ли вы, что...
С помощью CSS можно создавать адаптивные изображения, которые подстраиваются под размер экрана.
Благодаря помощи другого разработчика я смог выяснить, что этот синтаксис является частью пакета: https://www.npmjs.com/package/postcss-atrule-bem
Используя ту же вложенность SASS, что и пакет npm, вы можете найти и заменить в своей IDE блок @b на .block, элемент @e на &__element и модификатор @m на модификатор &--.