CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교 by 서현우 about CSS
- props ; return ( < ThemeProvider theme = { STYLED_COMPONENT_THEME } > < Layout > < Component / > < / Layout > < / ThemeProvider > ) ; } } const STYLED_COMPONENT_THEME = { colors : COLORS
- grey5 } ; & > div { box-shadow: ${ ( { index } ) => { return ` ${ ( index % 3 ) * 4 + 2 } px ${ ( index % 3 ) * 3 + 1 } px 5px #44444460 ` ; } } ; } ` ; const StyledFlex = styled ( Flex ) ` margin: 10px; padding: 0px; & > button { margin: 5px; flex: 1 0 auto; } background: rgba(0
- @mixin third_ row ( $index ) { margin-top : $index * 20px ; padding : 0 ; border-radius : 6px ; flex-direction : column ; @if $index % 3 == 0 { background : getColor ( "grey3" ) ; } @if $index % 3 == 1 { background : getColor ( "grey4" ) ; } @if $index % 3 == 2 { background : getColor ( "grey5" ) ; } & > div { box-shadow : ( $index % 3 ) * 4 + 2px ( $index % 3 ) * 3 + 1px 5px #44444460 ; } } @for $i from 1 through 15 {