如何在属性的快捷方式上编写数组值颜色 SCSS？

Question

我有一个 SCSS 文件，其中包含一组颜色值。

export const COLORS = {
  transparent: 'rgba(0,0,0,0)',
  primary: '#09596e',
  primary01: '#317D92',
  primary02: '#6BADBF',
  primary03: '#97C6D2',
  primary04: '#D4E9EF',
  primary05: '#ECFAFF',
  primary06: '#9DBDC6',
  primary07: '#EDF2F2',
  primary08: '#009DAB',
  primaryLight: '#46869C',
  primaryDark: '#003043',
  secondary: '#E15A52',
  secondaryLight: '#FF8A7F',
  secondaryDark: '#A92629',
  textBlack: '#323030',
  textGray: '#757575',
  bgGray: '#E0E0E0',
  border: '#BDBDBD',
  rail: '#EEEEEE', // dividerとかに使う
  bgLightGray: '#FAFAFA',
  white: '#FFFFFF',
  errorPink: '#EF7279',
  pink01: '#FFF5F5',
  yel01: '#EBA338',
  yel02: '#F5C173',
  yel03: '#E7C798',
  yel04: '#FBF6F0',
  yel05: '#FEFBEA',
  green01: '#34C84C'
}; 

我想通过使用上述值之一来更改我的边框值。 例如：

border: '1px solid #BDBDBD',
border-radius:' 1px 2px 1px #34C84C',

我想将那些硬编码的颜色值更改为上述变量的值，如果有人知道如何处理这个问题，我希望能得到您的帮助。 谢谢

Answer 1

这是我正在使用的解决方案。 创建一个类似 color-variables.scss 的文件并声明如下变量：

$primary: '#09596e';

$primary01: '#317D92';

$primary02: '#6BADBF';

$primary03: '#97C6D2';

//Import this file in your styles.scss or where you want to use like below: 

@import 'assets/scss/color-variables.scss';


//Use these colors like below: 

.className {
    color: $primary;
}

干杯!

Answer 2

反应方式：使用 styled-components https://styled-components.com/

一旦你安装并配置了它，你就可以按照你喜欢的方式调用颜色（一个例子）：

border: ${({ theme }) => `1px solid ${theme.colors.grey[2]}`,

SCSS 方式：检查@Vivek 响应

Answer 3

我找到了答案例如：

border-radius:`1px solid ${COLORS.border}`,
border-radius:`1px 2px 1px ${COLORS.green01}`,

在反应中，我在另一个网站上找到了一种方法，但它应该安装在源代码中：styled-components https://styled-components.com/