SCSS 기본 문법 - 변수, 믹스인

안녕하세요! 마크입니다.

 

저는 동료인 셀리나와 주말에 매주 스터디를 진행하고 있는데요. 서로 부족한 부분도 채워갈 수 있고, 스터디를 위해 준비하는 시간에 조금 더 공부도 하게 되어서 저의 성장에 큰 도움이 되고 있습니다. 오늘은 셀리나 덕분에 평소에 잘 몰랐던 SCSS 문법을 조금 더 알게 되었는데 이를 잊어버리지 않게 정리해보려고 합니다.

 

아래는 셀리나가 스터디 중 알려주신 내용입니다. 제가 유일하게 알고 있었던 SCSS 문법인 중첩(nesting)은 제외하고 정리할게요.

 

---

01. 변수

모든 변수의 용도가 그러하듯이 하나가 바뀔 때 모든 값을 바꿔주기보다 값 하나만 바꿔주면 되어서 매우 유용합니다.

 

$grey: #efefef;
$red: red;

$mobileButtonPadding: 40px;

.button {
  padding: $buttonPadding;
  color: $grey;
}

.subTitle {
  background-color: $grey;

  &:hover {
    background-color: $red;
  }
}

 

02. @mixin @include

믹스인은 제가 생각했을 때는 함수와 같은 개념으로 이해했습니다. 실제로 선언과 사용이 함수의 형태와 유사하기도 하고, 매개 변수를 받는 것도 함수와 매우 유사합니다. @mixin을 통해 선언한 내용은 @include를 통해 가져와야 합니다.

 

@mixin reset {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  @include reset();
  border-radius: 8px;
  color: #fff;
}

 

위에서 이야기한 것처럼 매개 변수를 받아 사용할 수 있습니다.

 

@mixin box($w, $h) {
  width: $w;
  height: $h;
}

div {
  @include box(50px, 100px);
}

 

03. 문자열 처리

자바스크립트에서 템플릿 리터럴 `${}`를 사용해 문자열을 처리할 수 있는 것처럼 믹스인에서도 인자로 문자열을 받아 처리할 수 있는데요. 보통 어떤 프로퍼티를 설정할 지 정하지 못 했을 때 사용하는 것으로 보입니다. -# { $argument }와 같은 식으로 사용하면 됩니다.

 

@mixin giveMargin( $position, $pixel ) {
  margin-#{ $position }: $pixel;
}

div {
  @include giveMargin(left, 3px);
}

 

그렇게 많이 사용할 것 같지는 않아 보이기는 하는데 그래도 써 봐야 알겠죠?!

 

---

 

보너스로 가상 선택자인 ::before, ::after, 그리고 '>'에 대해 정리하겠습니다.

 

::before, ::after는 선택한 요소의 앞, 뒤(HTML 상 앞, 뒤)에 가상의 요소를 추가하는 선택자인데요. 가상 선택자를 꼭 사용하지 않고 앞, 뒤에 다른 요소를 만들어준다면 대부분 대체 가능해서 많이 사용하지는 않는 것 같습니다.

 

.samsung::before {
  content: 'lg';
  position: absolute;
  top: 50px;
  width: 10px;
  height: 10px;
}

.samsung::after {
  content: 'apple';
  width: 10px;
  height: 10px;
}

 

위는 samsung이라는 클래스 앞, 뒤에 가상 선택자를 사용해 lg와 apple이라는 내용을 가진 fragment를 넣어준 것과 같습니다. content는 fragment 안쪽에 들어가는 내용이고, .samsung이 width와 height를 가지고 있더라도 가상 선택자에는 width와 height를 설정해주어야 실제로 보입니다.

 

'>'은 '>' 다음의 요소를 직속 자식 컴포넌트에만 찾도록 한정시키는 선택자입니다.