Максим Морев

Вам не нужна интерполяция при математических операциях внутри SASS:
transform: rotate($i * 6deg); и всё будет работать.

Интерполяция будет нужна, если вы будете работать с CSS функциями, например, с calc():
left: calc(#{$i}px + 10%);

Задача на текущий момент не решается на чистом CSS.
Можете вот это решение попробовать, либо попробовать нагуглить что-то другое по запросу "affix sidebar".

Жму руку дизайнеру, молодец, не как у всех.

Прямо так, как на скриншоте, на чистом CSS вряд ли получится, ибо левый нижний угол строго вертикальный, а вот правый... вообще с трудом такую фигуру представляю в реальности, поэтому вариант с трансформацией средствами браузера тут отпадает.

Изначально я не обратил внимания, что нижний край строго горизонтальный, и накидал такое как стартовую точку



Но когда заметил - понял, что так в принципе не выйдет сделать, на CSS нельзя "зафиксировать от трансформации" две стороны сразу.

Так что остаётся вариант с фоновой SVG-шкой, что по сути "фоновая картинка", либо вариант со вставкой этой SVG напрямую в кнопку (прям инлайном) и дальнейшие манипуляции с ней, если требуется адекватный ховер.

Делать лень, это нетрудно :)

Скорее всего, не указан ключ base в конфигурации и ресурсы пытаются загрузиться с адреса username.github.io/assets/... вместо username.github.io/package-name/assets/....

Вот тут пример того, как правильно.
Или поможет это, или давайте ссылку на репозиторий :)

Здесь используются медиа-запросы, просто реализация скрыта за миксином.
Вы всегда можете посмотреть в результирующем CSS, во что этот миксин разворачивается.

Сам миксин почти наверняка выглядит как-то так и разворачивается примерно вот в такое:

@media (min-width: 320px) {
  gap: calc(20px + 40 * (100vw - 320px) / 850);
}

@media (min-width: 1170px) {
  gap: 60px;
}

Ваша проблема решится с помощью -webkit-tap-highlight-color

Критерии "лучшести" какие?
В поддержке обычно проще и очевиднее иметь дубль с говорящим названием: `.block__text` и `.block__text-mobile`, например. Иногда, если контент отличается прям сильно и в нескольких элементах, вплоть до замены самой корневой сущности: `the-hero`, `.the-hero-mobile`, хотя это крайний случай, конечно.

Однако каждая такая скрытая нода по-прежнему парсится браузером и участвует в построении DOM, что влияет на производительность. Если их становится "много" в относительном выражении, рассматривайте вариант динамической замены.

Эта разметка абсолютно правильная в двух случаях:
1) Ваши `close` и `card` действительно нигде не переиспользуются;
2) Объём стилей блока `some-class` остаётся адекватным для восприятия.

Соответственно, вам нужен новый блок в двух случаях: либо он переиспользуется, либо для разделения кода для простоты восприятия.

Возьмём разметку посложнее (не надо в ней искать какого-то смысла, просто от фонаря что-то набрал для иллюстрации):

<div class="block">
  <!-- Header -->
  <div class="block__header">
    <h2 class="block__title">Title</h2>
    <div class="block__actions">
      <button type="button" class="block__action block__action--edit">
        <span class="block__action-icon"></span>
      </button>
    </div>
  </div>
  <!-- Content -->
  <div class="block__content">
    <p>...</p>
  </div>
  <!-- Footer -->
  <div class="block__footer">
    <div class="block__about">
      <div class="block__author"></div>
      <div class="block__date"></div>
    </div>
    <div class="block__awards">
      <div class="block__award">
        <div class="block__award-inner"></div>
        <div class="block__award-tooltip">
          <div class="block__award-tooltip-content"></div>
          <button type="button" class="block__award-tooltip-close"></button>
        </div>
      </div>
    </div>
  </div>
</div>

Положим, что весь контент этого блока уникальный и никак не переиспользуется.
Объём стилей `block` при такой структуре неизбежно станет некомфортным для восприятия, строк на 200-300.

В таком случае хорошо создать внутренний блок (или несколько) просто для того, чтобы размазать сложность.
`block-header`, `block-footer` или даже `block-footer-award`.

Самое главное здесь организовать файловую структуру / конфигурационный файл / чем вы там ещё собираете таким образом, чтобы было очевидно, что `block-footer` - это не самостоятельный блок, а внутренний блок `block`, нужный только для упрощения восприятия, и он не может / не должен использоваться в отрыве от него (в этом случае у него не должно быть в названии общего префикса с `block`, чтобы не создавать путаницу)

* И не забывать о том, что даже для таких внутренних блоков действуют те же самые правила, что и для других - вся внешняя геометрия задаётся через элементы.

Подробнее об этом можно узнать здесь

Вот здесь, например, делал когда-то такую вещь (блок "Этапы создания корпоративного сайта").



Идея, вкратце:

1. Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
   
2. Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
   
3. Как нарисуется - на js считаете ключевые точки (координаты), через которые нужно провести линии.
   
4. Динамически рисуете SVG по вашим ключевым точкам.
   О том, какие варианты вообще есть, можно почитать на MDN, например.
   Выглядеть это будет примерно так:
   
   
   
   В вашем случае рекомендую использовать кривые Безье. Здесь мне нужно было сделать полукруг, поэтому я использовал дуги, у вас же просто статичная величина закругления.
   
5. На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
   
6. Опционально заморачиваетесь и добавляете сверху ещё один путь, который по скроллу будет "заполняться"
   

Это в целом чёрная магия, можно полдня убить, но красиво :)
Если это всё очень сложно, то просто картинкой вставьте, высоту элементов фиксируйте, и меняйте картинку для адаптивных вариантов.

Готовых вариантов тут в общем-то вы вряд ли найдёте, нужно взять и разработать.
У меня была идея оформить это в какую-то библиотеку, но как и все остальные идеи - и ныне лежит в туду-листе на 60+ пунктов. :)

При необходимости прям вот такой оптимизации вряд ли, слишком узкая задача. Это не невозможно, просто зачем?

Если автоматически из HTML-разметки нужно сделать s?css, то для этого есть eCSStractor

Если лень самостоятельно писать управляющую структуру для CSS, то можно её свести к одному символу с помощью сниппетов. Вот мой вопрос с моим же ответом, до сих пор так и делаю, брат жив.

Порядок свойств имеет значение. Сначала сделайте translate, потом всё остальное, только и всего. :)

Через каскад такие вещи стилизуются.
Каскад - плохо в общем случае, но для пользовательского контента - допустимо. Уж тем более не стоит того, чтобы на JS по дому бегать. :)

.user-content { ... }
.user-content p { ... }
.user-content h# { ... }