Question

是否可以在不手动执行的情况下，将.wrap中每个元素的当前字体大小添加1px？

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

Answer 1

除非使用相对值（如em），然后在body上设置字体大小，否则无法使用普通CSS做到这一点。这是创建一个标准的字体大小（无论您在body上设置的大小），然后将其乘以您在嵌套CSS中设置为em的值。例如，如果将body设置为font-size: 16px;，然后将其他所有内容都设置为1em（与16px相同）或2em（32px）等，则可以控制它基本大小，只需更改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;
}

您也可以使用这些变量进行数学运算（如Matt Fryer所述），因此，如果您不关心在不同字体大小之间保持相同的缩放比例，则可以从技术上将字体大小添加到变量中。（我的意思是16px / 32px与（16px + 1px）/（32px + 1px）的比率不同。如果将这些更改放大得更大，您会发现相对大小是不稳定的。）

我在一个项目中工作，根据环境，我们在所有字体大小中添加1px。我们这样做的方法是在工作表上的SASS变量中定义设计语言中的所有字体大小，我们将其用于导入构建模块的所有.scss文件。我们有两个工作表：每个环境一个。具有“ font-sizes +1”的环境表仅将所有font-size变量设置为“ +1”值。

Answer 2

只需使用SASS变量，如下所示：

$var: 1px;

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

给特定元素内每个元素的字体大小加1px

2 个答案: