有没有办法将颜色十六进制代码存储在类似于 React-Native 中的 SASS 的变量中？

Question

我的 React Native 项目中有颜色，我想知道是否可以将颜色存储在类似于使用 SASS 的变量中 - 命名它们并将它们保存在单独的文件中。下面是一些输入字段的样式示例。

module.exports = StyleSheet.create({
  textInput:{
    backgroundColor: '#fff',
    color: '#666',
    height: 60,
    marginBottom: 20,
    marginLeft: 20,
    marginRight: 20,
    paddingLeft: 10,
    paddingRight: 10,
  }
});

我想知道我是否可以做类似的事情（SASS）：

$cornflower-blue: #6195ED; （在单独的文件中使用其他颜色变量）

article {
  background-color: $cornflower-blue;
}

提前致谢。

Answer 1

你可以在 JavaScript 中直接使用变量。

颜色.js

export const cornFlowerBlue = '#6195ED';

当你想使用它时

import {cornFlowerBlue} from './colors';
...
module.exports = StyleSheet.create({
  article {
    backgroundColor: cornFlowerBlue,
  }
});

编辑： $cornflower-blue 不能用作名称，因为-它保留用于减法。