SASS Interpolation, mixin

개요

• Sass를 사용하면서 css와 크게 달랐던 점은 일단 nesting을 사용한다는 점이고 실제 이 부분만 사용했기에 sass의 다른 기능을 간과하고 넘어 갔던 적이 많았다.
• 프로젝트를 진행하면서 sass만의 특별한 기능들을 확인해 볼 수 있었고 몇가지를 더 찾아 정리해 보았다.

Heart Animation

@for $i from 1 through 20 {
  &:nth-child(#{$i}) {
	  &::after {
		content: '♥️';
		position: absolute;
		left: calc(random($limit: 45) * 2%);
		bottom: -calc(random($limit: 10) * 0.75rem);
		font-size: calc(0.125rem * random($limit: 10));
		animation: heartBubbles 1.5s linear infinite;
		animation-delay: calc(random($limit: 30) * 0.2s);
		opacity: 0;
	  }
	}
}

• 위 코드는 프로젝트에서 사용한 코드로 하트 아이콘이 랜덤한 위치에서 계속 튀어나오는 애니메이션을 구현한 것이다.
• sass의 for문을 통해 구현한다는 것을 알게 되었고 그 과정에서 변수, 생소한 #{$variable} 문법들을 알게 되었다.

interpolation (보간법)

• 위에서 본 매우 생소한 #{$변수명}에 대한 문법 설명이다.
• sass에서는 css와 다르게 $로 변수를 선언하고 값을 관리할 수 있다는 점이다. (--를 사용한 custom property와는 다름!!)
• 하지만 이런 변수를 그냥 사용하는 경우 원하는 결과와 다를 수 있는데 변수를 그대로 적용시키기에 그렇다. (이는 javascript에서 number인줄 알았는데 string이었던 것 같은 상황!)
• 즉, #{ $변수명 } 으로 사용! (특히 변수의 값이 숫자여도 javascript의 key처럼 문자로 들어가기에 주의할 것)

mixin을 통한 mediaQuery

• 기존의 mediaquery는 @media screen and (max-width: 768px) { style } 과 같이 작성하는 편이거나 css custom property의 값만을 변경하는 경우가 많았다.
• sass에서는 mixin과 @content를 사용해 처리할 수 있다.

 @mixin tablet {
   @media (min-width: #{$mobile} and max-width: #{$tablet} )
	 {@content}
 }

• @content에는 mixin을 include하는 부분에서 추가적으로 작성하는 style을 가져와 적용 시킬 수 있다.

sass에서의 custom property

• 그냥 --을 사용하여 css처럼 작성할 수도 있지만 sass의 특징 중 하나인 변수를 통한 재사용과 같이 사용 시 코드가 번잡해 질 수 있다. 이는 위에서 설명한 interpolation때문인데...

 --#{$prefix}-color: red;
 color: var(--#{$prefix}-color);

• 딱봐도 굉장히 지저분해 보인다. 이에 대해 sass의 해결책으로는 custom property를 가져오고 변경하는 함수를 만드는 것이다.

 @function cssvar($name, $prefix) {
 	@return var(--#{prefix}--#{$name});
 }
 
 color: cssvar('color', "feed");

참고자료

https://abcdqbbq.tistory.com/82