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

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

0 голосов
/ 29 января 2019

Есть ли способ добавить 1px к текущему размеру шрифта каждого элемента внутри .wrap, не делая это вручную? 

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

Ответы [ 2 ]

0 голосов
/ 29 января 2019

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

$var: 1px;

.wrap
{
    margin-top: 169px;
    .element1
    {
        font-size: 30px + $var;
    }
    .element2
    {
        font-size: 20px + $var;
    }
}
0 голосов
/ 29 января 2019

Нет способа сделать это с обычным CSS, если вы не используете относительные значения (например, em), а затем устанавливаете размер шрифта на body.Для этого нужно создать стандартный размер шрифта (любой размер, который вы установили на body), а затем умножить его на то, что вы указали в качестве значения em во вложенном CSS.Например, если вы установите body на font-size: 16px;, а затем установите все остальное на 1em (аналогично 16px) или 2em (32px) и т. Д., Вы можете контролировать этот базовый размер, просто изменив font-size on 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;
}

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

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

...