如何用变量写 css 规则来改变字体大小？

How to write css rule with variable to change font-size?

我可以做一些事情吗：

.page-text-size-* { font-size: * !important; }

“*”应替换为数字。

或者我需要这样使用：

.page-text-size-10 { font-size: 10px !important;  }
.page-text-size-12 { font-size: 12px !important;  }

首先不要使用 !important，这是不好的做法，您的问题的答案很简单，放在这里 LESS

仅使用 CSS 只有 Mozilla 才有可能，它仍然是一项实验性技术 (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility)。

但您可以使用 Less (http://lesscss.org) or Sass (http://sass-lang.com) 来完成它。

使用SASS，这是完全可能的。 Plain CSS 不支持这种东西。

如果您想要一个序列中的每个数字：

@for $i from 1 through 4 {
  .page-text-size-#{$i} {
     font-size: $i;
  }
}

或者，如果您只需要您指定的数字：

$list: 10 20 24 36;

@each $size in $list {
  .page-text-size-#{$size} {
    font-size: $size; 
   }
}

阅读此内容以供参考：http://thesassway.com/intermediate/if-for-each-while