vuetify.js - 虚拟化 3 : How to define button font size based on button size?

Question

我已经创建了settings.scss，并且我已经用它来设置按钮大小

$typography: ('button': ('size': 14px))

还有这个

$button-font-size: 14px,

但是我应该怎么做才能使不同按钮大小的字体大小不同？

PS。在 Vuetify 2 中我使用了这个

$btn-font-sizes: (
  'small': 13px,
  'large': 14px,
);

Answer 1

SASS 现在使用 relative scaling function对于按钮 height、font-size、width-ratio、padding-ratio 基于默认 button size settings 。通过此设置，您可以使用 settings.$size-scales 实现按钮大小相关 CSS Prop 的相对缩放:

在您的 settings.scss 中:

@forward 'vuetify/settings' with (
  $size-scales: (
    'x-small': -0.7,
    'small': -0.2,
    'default': 0,
    'large': 2,
    'x-large': 10
  )
);

这种方法的优点是方便，您可以轻松添加自定义尺寸，例如 xx-small 或其他尺寸。但是，如果您只想更改字体大小而不更改其他属性，则必须在 CSS 中指定每个按钮的大小:

.v-btn--size-x-small {
  font-size: 8px;
}

当然，您可以使用类名称来定位按钮的任何属性，并完全避免这些设置。