React - css변수

• css 변수 : css에서 사용할 수 있는 변수(사용자 지정 css 속성)
  • 자바스크립트나 PHP와 같은 프로그래밍 언어에서 널리 사용되는 변수 개념을 css에 도입
  • 필요성: 같은 값을 여러번 사용할 때 편리(코드 간편화)

# 주된 색상을 여러번 지정할 때
p {
    color: #8B008B;
}
h1 {
    background-color: #8B008B;
}
div {
    border-color: #8B008B;
}

       ↓ css 변수 적용

:root {
    --primary-color: #8B008B;
    /* 웹사이트의 주된 색상으로 짙은 보라색(#8B008B)을 --primary-color라는 변수 이름으로 저장한다. */
}
p {
    color: var(--primary-color);
}
h1 {
    background-color: var(--primary-color);
}
div {
    border-color: var(--primary-color);
}

• css 변수 적용
  • : root, body를 사용하면 문서 전체에서 사용할 변수로 설정
  • ex) .container라는 클래스 내부의 자손 요소에만 사용할 변수라면 선택자응 .container로 지정
  • --primary-color: 사용할 변수이름을 지정 (변수이름은 -- 기호 뒤에 사용할 변수 이름을 사용해야함)
  • 정의한 변수는 변수를 정의할 때 사용한 선택자나 그 자손 요소에서 사용 가능!

<div>
  안녕하세요
</div>

// CSS
div {
  background-color: var(--mui-primary-main);
  color: var(--mui-primary-contrastText);
  font-size: 4rem;
  font-weight: bold;
}

• tailwind JIT를 이용해서 css 변수 접근

<!-- 테일윈드 불러오기 -->
<script src="https://cdn.tailwindcss.com"></script>

<div class="box">
  <section class="section1 border border-red-500 text-[2rem] text-[gold]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla accusamus fuga quos nam cum odit omnis, amet tempore. Sapiente dolorum deserunt pariatur facere, cumque iusto amet obcaecati sint ducimus.
    <div>123</div>
  </section>
  <section class="section2 border border-red-500 text-[2rem] text-[color:var(--color-1)]">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus nesciunt inventore nihil omnis aut sunt voluptate veritatis at, molestias assumenda quod quibusdam soluta sint exercitationem optio sequi delectus ipsam illum?</section>
  <section class="section3 border border-red-500 text-[2rem] hover:bg-[--bg-color]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt illo accusamus ducimus nemo, voluptatem cupiditate saepe assumenda! Dolores distinctio at exercitationem velit, sed sit rerum sapiente autem voluptates eaque commodi.</section>
</div>

// CSS
:root {
  --color-1: red;
  --bg-color: blue;
}