Sass mixin, extend CSS 코드 중복제거에 관하여

Question

읽어주셔서 감사합니다..a { display: flex; justify-content: center; table { margin-top: 20px; border-collapse: 30px; td { width: 100px; height: 21px; } span { padding: 5px; 10px; } } } 이런식으로 CSS 코드가 있습니다만, 여기서 a 클래스의 코드를 b 클래스로 별도 생성해 재사용 하고싶습니다만, 디자인은 같지만 같은 디자인 중 span은 필요하지 않아 span 빼고 코드 중복없이 가져오고 싶은데 조사해보니 mixin,extend 이런식으로 들고오면 된다고는 하는데 extend는 그룹화라 몽땅 들고와질 것 같습니다.. span 빼고 코드 중복없이 재사용 가능할수있는 방법은 없을까요?

EmDev · Accepted Answer

styled-components라면const Component = styled.div` display: flex; justify-content: center; table { margin-top: 20px; border-collapse: 30px; td { width: 100px; height: 21px; } ${(props) => props.useSpan && css ` span { padding: 5px; 10px; } `} } `;이렇게 만들고 저걸 쓰는 쪽에서는//span 안쓰고 싶은 경우 //span 쓰고 싶은 경우 위에 내용처럼 호출하면 원하시는대로 동작할거에요

S_J · Answer

span을 뺀 코드를 mixin으로 정의하세요.

Sass mixin, extend CSS 코드 중복제거에 관하여

2개의 답변

#sass 목록