How to write Array value color SCSS on the shortcut of a property?-CodePudding

I have a SCSS file with an array of color's values.

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'
};

And i want to change my border value by using one of the above value. For example:

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

I would like to change those hard coded color values to the above variable's value, if anyone knows how to deal with this please i would love your help. Thank you

CodePudding user response：

Here is my solution which I am using. Create a file like color-variables.scss and declare variables like below:

$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;
}

Cheers!

CodePudding user response：

The react way : use styled-components https://styled-components.com/

Once you installed it and configured it, you'll be able to call the colors as you like this way (an example) :

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

The SCSS way : check @Vivek response

CodePudding user response：

I found the answer For example:

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