흑염소처럼

scss에서 @ at- root 를 사용하면서 불편했던 점은 동일한 스타일을 쓰는데 @ at-root를 중복나열하여 사용할 수 없어 아래 코드와 같이 사용하고 싶으나 사용할 수 없습니다. 그럴 때 아래와 같이 사용할 수 있습니다. //아래와 같이 사용 못함 .test_wrap{ @at-root .join_coupon &,@at-root .identical_product &{ top: 50%; transform: rotate(45deg) translateY(-50%); } } //scss 속성을 사용하여 처리 가능 .test_wrap{ @at-root #{selector-nest(".test1,.test2","#{&}")}{ top: 50%; transform: rotate(45deg) translateY..

무거운 reset.css의 나열이 아닌 필요한 태그들만 사용할 수 있다면 어떨까 ?? 보통 마크업 작업을 할 때 생각보다 쓰는 태그들은 한정되어 있는데 reset.css는 필요없는 태그와 스타일들이 훨씬 많다. scss의 placeholder와 mixin 그리고 문법을 최대한 활용하여 필요한 태그만 선택가능하게 만들어 보면 어떨까 하는 생각에서 시작되었다. reset.scss를 원하는 스타일만 사용하도록 분기 처리하여 불필요한 스타일 제거로 응답 속도 향상에 기여하도록 만들어보자 scss Docs : https://sass-lang.com/documentation @charset "UTF-8"; %border-style{ border: 0; } %box-style{ margin: 0; padding: 0..

scss 코드를 최적화 시키기 위한 것으로 변수를 선언한 @function을 공통 scss파일로 만들고 각각의 컴포넌트 별로 scss파일을 쪼개서 해당 @function을 변수로 사용하는 방법을 소개하고자 한다. 아래 코드를 해석해보자!!! /* function */ @function getColors ( $findKey : 'text' ) { $list : (); @each $key , $value in $colors { @if ( $key == unquote( $findKey )) { $list: $value; } } @return $list; } $colors : ( default : #959da6 #f8f9fa #e0e2e6 #ccd2d8 #bcb5b9 #2c68f1, text : #7d7e80 ..

@for $i from 1 through 11{ .spread .card_bind:nth-child(#{$i}) { left: 80*($i - 1px); top: 0px; } } #{$i}는 문자열로 받게 되고 $i는 변수로 받게된다. 아래와 같이 css가 노출이 된다. .spread .card_bind:nth-child(1) { left: 0px; top: 0px; } .spread .card_bind:nth-child(2) { left: 80px; top: 0px; } .spread .card_bind:nth-child(3) { left: 160px; top: 0px; } .spread .card_bind:nth-child(4) { left: 240px; top: 0px; } .spread .card..