CSS 변수

• CSS 변수: 색상을 상수로 정의해서 CSS에 적용하는 방법

1. CSS 변수

1. :root에 변수 정의

   /* styles/colors.css */
   :root {
     --primary-color: #000000;
     --secondary-color: #ffffff;
     --text-color: #333;
   }

2. 실제 스타일에 적용

   /* styles/component.css */
   .button {
     background-color: var(--primary-color);
     color: var(--text-color);
   }

3. 자바스크립트 파일에 css 파일 import

   // index.js 혹은 main.jsx 등
   import "./styles/colors.css";
   import "./styles/component.css";

2. CSS-in-JS에서 상수 사용

1. 색상 상수 정의

   // styles/colors.js
   export const COLORS = {
     primary: #000000,
     secondary: #ffffff,
     text: #333,
   };

2. styled-components에서 사용

   import styled from "styled-components";
   import { COLORS } from "../styles/colors";
   
   const Button = styled.button`
     background-color: ${COLORS.primary};
     color: ${COLORS.text};
   `;

3. SCSS

• 추후 보강