Styled-components에서 css 변수 사용하는 법

아래에는 원형을 만들기 위한 방법입니다! 원형이 되려면 width와 height가 같고 border-radius는 그에 반비례해야하는데, 같아도 상관없습니다. 원래는 일일이 적어주어야하지만 수고로움을 덜기위하여 css 변수를 사용했습니다!

const ImageCircle = styled.div`
    /* style 변수를 만들기 위해 --를 사용합니다! */
    --size: ${props => props.size}px;
    /* css변수 적용했을 때와 같아요! */
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);

    background-image: url(${props => props.src});
    background-size: cover;
    margin: 4px;
`;

export default Image;

 

 

📌변수 생성법

--변수명 

 

📌변수 사용법

var(--변수명)