Reactzhong 字体大小的scss代码

在React中使用SCSS设置字体大小，你可以通过变量（variables）和嵌套规则来实现。首先，创建一个全局的`fonts.scss`文件，定义常用的字体尺寸：

// fonts.scss
$font-size-base: 16px;
$font-size-lg: $font-size-base * 1.5;
$font-size-xl: $font-size-base * 2;

// 基本字体声明
@mixin font-size($size) {
  font-size: $size;
}

// 示例：应用基础字体大小
body {
  @include font-size($font-size-base);
}

// 应用于标题和大段文字
h1, h2, p {
  @include font-size($font-size-lg);
}

// 更大的元素，如卡片或按钮
.card-content, .button {
  @include font-size($font-size-xl);
}

然后，在你的React组件里引入并使用这个SCSS文件，通常是在`index.module.scss`或`App.css`这样的入口文件中：

import styles from './styles/fonts.scss';

// 组件内部引用字体大小
function MyComponent() {
  //...
  return <div className={styles.body}>这是大字</div>;
}