如何在 Styled Components 中使用 SCSS 变量

Photo by me !

在 SCSS 中我们可以将多次使用的颜色、字体大小等设置为变量来使用，这样之后想要更改的时候，便不用再去一个一个的查找更改，而只用更改变量这一个地方，非常的方便。

但是 SCSS 变量无法直接在 React 的 styled components 中使用。因为 styled components 是 CSS-in-JS，所以本质上它就是一个 JavaScript 文件，我们不能在一个 JS 文件中直接使用 CSS。

我在用 Vue 做项目的时候完全没有考虑过这个问题，用 SCSS 变量用的非常舒服，但在第二次想用 React 再次实现一次项目的时候，发现在 styled components 中不能直接用 SCSS 变量了，让我着实头疼了一下，于是我便开始找办法挨着试，可终于让我解决了这个问题，可以继续舒舒服服用我的 SCSS 变量了！

将所用到的 SCSS 变量写成对象的形式

使用一个 helper.jsx 文件归集所有用到的变量，代码如下：

// helper.jsx

const FontSizes = {
  sizeS: `14px`,
  sizeM: `16px`,
  sizeL: `20px`,
}

const FontColor = {
  colorMain: `#666`,
  colorFont: `#000`,
}

export {FontSizes, FontColor}

在 Styled Components 中用 ${XXX.aaa} 的形式使用

代码如下所示：

import * as React from 'react';
import styled from 'styled-components';
import {FontColor, FontSizes} from '../helper';

const SectionWrapper = styled.section`
  margin: 8px 16px;

  > h2 {
    font-size: ${FontSizes.sizeM};
    font-weight: bold;
    color: ${FontColor.colorMain};
    border-bottom: 2px solid ${FontColor.colorMain};
    padding: 4px 0;
  }
`;