Сергей delphinpro

Потому что некоторые (и их много) свойства принимают только дискретные значения

https://jsfiddle.net/5pL0sukt/24/
https://jsfiddle.net/5pL0sukt/25/

Вычислите ширину полосы прокрутки и вместе с оверфлоу добавляйте такой же марджин справа.

Как вычислить джавасриптом ширину скроллбара гугл подскажет.

jsfiddle.net/cqb73h0u/1

Вот так

ol#politika, ol#politika ol {
  list-style: none; 
  counter-reset: li; 
}
ol#politika li:before {
  counter-increment: li; 
  content: counters(li,".") ". "; 
}

.main-menu {
    $this: &;
    display: none;
    &--open {
        display: block;
        #{$this}__link {  }
    }
}

Но я предпочитаю такой вариант:

.main-menu {
    display: none;
    &--open { display: block; }
    &--open &__link {  }
}

Фиксированная таблица распределяет ячейки равномерно, как space-between во флексах.
Отсюда и пляшите

.progress
  .cell

.progress { display: table; table-layout: fixed; width: 100%; }
.cell { display: table-cell; }

Возможно придется добавить обертку для table-row
Ячейки релатив, или внутри доп. контейнер с релатив.
Точки добавить внутрь, раскидать обсолютом по границам ячеек.

Я писал собственное решение, это не сложно, в принципе.
Но есть и готовые jQuery плагины, например этот — 352media.github.io/flexMenu

В частных случаях можно обойтись без javascript.
Под частными случаями я подразумеваю меню, которое не будет часто изменяться, а при изменениях всегда есть возможность привлечь верстальщика для правок.
Суть проста — хардкодим медиазапросами.

Структура примерно такая

<ul>
  <li class="more">...</li>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

.more изначально скрыт, при уменьшении ширины ставим брикпойнт, показываем .more абсолютом в конце меню, и также абсолютами позиционируем последние не помещающиеся пункты в столбик.
Эти пункты делаем скрытми и показываем их правилом ul:hover > li { display: block}
При большем уменьшении ширины, всё больше пунктов позиционируем в столбик.

Да, это не по феншую. Зато просто и работает. В определённых случаях может быть простым и быстрым решением проблемы.

MDN — наше всё!
CSS Keyword index

Вариант "В лоб" — два вложенных блока, чтобы получить четыре псевдоэлемента. ПЭ позиционируются под основной плашкой, трансформируются и наделяются подходящими тенями через box-shadow.
Вариант получше — на первый взгляд кажется можно обойтись двумя ПЭ, наклонными прямоугольниками. Но надо смотреть, как выйдет.
Самый отстойный вариант — вырезать тени картинками.

UPD: Пример второго варианта https://codepen.io/delphinpro/pen/LrYbKb

Это простой эскейпинг, экранирование спецсимволов. или недопустимых символов.
В CSS класс может начинаться только с символов "a-z, _, -"
Но в html можно писать что угодно.
Поэтому можно делать так

.\31 {}
.\@md-3

<div class="31"></div>
<div class="@md-3"></div>

К sass отношения это дело не имеет. Чистый css.

Придумайте способ позиционирования без трансформаций.

В данном случае очевидно, что это не оформительские картинки, они являются контентом.
Значит нужно использовать тег img.
Для управления заполнением есть свойство object-fit.

Как вариант, можно совмещать два подхода.

<div style="background-image:url(image.jpg)"><img src="image.jpg"></div>

div {
  backgorund: no-repeat 50% 50%;
  background-size: cover;
}
div > img {
  opacity: 0;
}

Плюс такого подхода: и поисковая оптимизация, и поддержка background-size лучше, чем object-fit.

body {
  --background-color: #{$bg-color};
  background-color: $bg-color;
}

https://codepen.io/delphinpro/pen/MGbgor

.selector {
  font-size: 16px; /* fallback */
  font-size: 1rem;
}

Разумеется, следует написать миксинчик для препроцессора, который будет в пиксели/ремы/вьюпорты пересчитывать. Или плагин для пост-цсс.

https://transfonter.org/

Почему все молчат о том, что второй вариант нарушает синтаксис CSS и не будет работать в принципе?!

Автор не упоминает препроцессоры, в тегах тоже нет. Значит речь идёт о нативном css, в котором только первый вариант и возможен.

НО, даже в первом варианте я категорически не рекомендую писать так, как вы написали. Гораздо лучше и удобнее будет так:

/*== Какой-то блок на странице */
.class-1 {
  /* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
  .class-1 {
    /* стили для экранов 767px и менее */
  }
}

/*== Какой-то другой блок на странице */
.class-2 {
  /* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
  .class-2 {
    /* стили для экранов 767px и менее */
  }
}

/*== И так далее… */
…

Код должен быть структурирован. Стили, описывающие отдельный селектор, всегда должны быть все вместе и рядом.

А если вы собираете стили препроцессором, то наверняка у вас описания всех селекторов будут раскиданы по отдельным файлам. Медиазапрос для селектора пишете в том же файле, где и основной стиль.

Повторю ещё раз: главное — структурированность кода! Пишете один раз, читаете и дорабатываете — сотни. Облегчайте себе будущие чтение и модификацию кода, который пишете.

Bd - Bold (700)
Cn - Condensed (Сжатый)
Blk - Black (900)
Lt - Light (300)
Th - Thin (100)
It - Italic
UltLt - UltraLight (200)

ну и так далее.

еще можно два раза кликнуть и в окне просмотра шрифта глянуть его полное название