Добавление 1px к размеру шрифта каждого элемента внутри определенного элемента

Невозможно сделать это с помощью обычного CSS, если только вы не используете относительные значения (например, em), а затем не устанавливаете размер шрифта в body. Это создает стандартный размер шрифта (независимо от того, какой размер вы установили в body), а затем умножает его на то, что вы установили в качестве значения em во вложенном CSS. Например, если вы установите для body значение font-size: 16px;, а затем установите для всех остальных значений значение 1em (такое же, как 16 пикселей) или 2em (32 пикселя) и т. д., вы можете контролировать этот базовый размер, просто изменив font-size на body.

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;  // 16 * 2 = 32px
}

p {
  font-size: 1.5em;  // 16 * 1.5 = 24px;
}

Кроме того, поскольку кажется, что вы используете SASS, вы можете создать переменные для размера шрифта, а затем изменить эти переменные.

$font-size-sm: 16px;
$font-size-lg: 32px;

h1 {
  font-size: $font-size-lg;
}

p {
  font-size: $font-size-sm;
}

Вы также можете выполнять математические операции с этими переменными (как заметил Мэтт Фрайер), поэтому технически вы можете добавить размер шрифта к переменной, если вам не нужно сохранять одинаковые коэффициенты масштабирования между разными размерами шрифта. (Я имею в виду, что соотношение 16 пикселей / 32 пикселя отличается от соотношения (16 пикселей + 1 пиксель) / (32 пикселей + 1 пиксель). Если вы увеличите масштаб этих изменений, вы заметите, что относительные размеры были шаткими.)

Я работаю над проектом, в котором, в зависимости от среды, мы добавляем 1px ко всем размерам шрифта. Мы делаем это следующим образом: мы определяем все размеры шрифтов в нашем языке дизайна в переменных SASS на листе, который мы используем для импорта всех наших файлов .scss для модуля сборки. У нас есть два таких листа: по одному для каждой среды. Лист для среды с «размерами шрифта +1» просто имеет все переменные размера шрифта, установленные в значения «+1».

Просто используйте переменную SASS, например:

$var: 1px;

.wrap
{
    margin-top: 169px;
    .element1
    {
        font-size: 30px + $var;
    }
    .element2
    {
        font-size: 20px + $var;
    }
}