vanilla-extract/css 사용하기

vars

Vanilla Extract에서는 CSS 변수가 'vars' 객체의 키로 존재해야 한다.

vars 객체에서 변수 사용하는 법

1. CSS 변수를 직접 사용

   const myStyle = style({
   vars: {
    '--my-color': 'purple'
   }
   });

2. Javascript 변수를 CSS 변수로 사용

   import { style, createVar } from '@vanilla-extract/css';
   

const myVar = createVar();

const myStyle = style({
vars: {
[myVar]: 'purple' // myVar 변수를 CSS 변수 키로 사용
}
});

즉 CSS 변수를 직접 사용할 때는 대괄호가 필요없다.
Javascript 변수를 CSS 변수의 키로 사용할 때는 대괄호를 사용하여 동적으로 키를 생성한다.

### css 선택자
```javascript
import { style } from '@vanilla-extract/css';

const myStyle = style({
  ':hover': {
    color: 'pink'
  },
  ':first-of-type': {
    color: 'blue'
  },
  '::before': {
    content: ''
  }
});

selector

더 복잡한 css 선택자를 사용할 때는 selector 키를 사용한다. 단순한 css 선택자와 다르게 자기자신을 &로 칭한다.

import { style } from '@vanilla-extract/css';

const link = style({
  selectors: {
    '&:hover:not(:active)': {
      border: '2px solid aquamarine'
    },
    'nav li > &': {
      textDecoration: 'underline'
    }
  }
});

• 타겟이 마우스가 호버됐지만 클릭된 상태를 아닐 때, 테두리 변경
• nav의 li의 자식이 타겟일 때, 밑줄 긋기

createTheme

테마를 생성한다. 디자인 시스템에서 자주 사용하는 컬러 팔레트, 폰트, 사이즈, 간격 등 변수를 만들어주는 것이라고 생각하면 편하다.

import { createTheme } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const otherThemeClass = createTheme(vars, {
  color: {
    brand: 'red'
  },
  font: {
    body: 'helvetica'
  }
});

themeClass는 className에 들어갈 클래스명이고 아직까지는 사용한 적이 없다.
따라서 주로 export const vars = createTheme({}) 이런식으로 사용하고 font-family: font.body; 이런식으로 사용한다.

확장

import { style } from '@vanilla-extract/css';

const base = style({ padding: 12 });

const primary = style([base, { background: 'blue' }]

 

### createGlobalTheme

이전에 createTheme은 컴포넌트의 테마를 설정한다면 createGlobalTheme은 전역 테마를 설정한다.