[JAY⌨️SCSS] SASS(SCSS) 간단 사용법 두번째! Mixin, if, for, function

 

 

 

 1️⃣ @mixin 🌟

• Sass에서 @mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일 그룹을 정의할 수 있다.
• @mixin지시문을 통해 mixin을 생성하고 필요한 경우 @include기능을 통해 불러와서 값을 넣어 재사용하는 방식.
• @mixin을 더 유연하게 사용하기 위해서 Arguments 값을 전달할 수도 있다.
  ( $key : value ) 형태로 작성하면 arguments가 공란일 때 기본값도 설정할 수 있다. (기본 값은 생략 가능)
• 자동화 되어있는 _mixin.scss 그대로 가져와서 사용해 보는 것을 추천.
  실제 현업에서도 _mixin은 새로 작성해서 사용하지 않고 고정되어 있는 경우가 많다.
• ⚠️ 반복하는 모든 코드를 하나의 @mixin에 몰아넣어서 사용하는 건 권장하지 않음! 
  서로 연관 있는 스타일 속성끼리 묶으면 좀 더 사용성이 높은 @mixin을 만들 수 있다.

 

/* @mixin을 활용해 버튼 스타일 제어 */

@mixin button($color:#b4d455) {
  background-color: $color;
  border-radius: 5px;
  padding: .25em .5em;
  &:hover {
    cursor: pointer;
	background-color: $color;
	border-color: $color;
  }
}
.button-a {
  @include button;
}
.button-b {
  @include button(#c0ffee);
}

 

@Mixin에 Arguments를 입력해서 재사용 가능한 button을 스타일링하는 방법. CSS컴파일링된 예시와 함께 비교.

 

 

 

 2️⃣ @if

• @if (조건) { 조건이 참일 때 실행될 구문 } @else { if문의 조건이 거짓일 때 실행될 구문 } 을 가진다.
• 비슷한 구조지만 특정 조건에 해당할 때만 스타일을 제어해야 할 경우 사용.

 

/* @if와 @mixin을 활용해 미디어쿼리 스타일 제어 */

@mixin media($size) {
  @if $size =='mobile' {
    @media screen and (max-width: 768px) {
      @content;
    }
  }

  @else if $size =='tablet' {
    @media screen and (min-width: 769px) and (max-width: 1024px) {
      @content;
    }
  }

  @else if $size =='desktop' {
    @media screen and (min-width: 1025px) {
      @content;
    }
  }
}

@if와 @mixin을 활용해서 재사용 가능한 Media Query를 스타일링하는 방법. CSS컴파일링된 예시와 함께 비교.

 

 

 3️⃣ @for

• @for문에 from(시작) through(끝)를 입력하면 해당되는 범위에서 숫자를 변수에 할당해서 반복을 실행한다.
• 변수명을 속성에서 사용할 때는 #{$변수명} 형태로 사용.

 

/* @for 의 구조 */

for ($변수) from (반복을 시작할 숫자) through(반복을 끝낼 숫자){
	// 반복할 내용
}

/* @for을 이용해 nth-선택자에게 각각의 image를 배경에 넣어준다. */

@for $i from 1 through 5 {
  .photo-box:nth-child(#{$i}) {
    background-image: url("../assets/images#{$i}.png");
  }
}

 

@for을 활용해서 재사용 가능한 Background를 스타일링하는 방법. CSS컴파일링된 예시와 함께 비교.

 

 

 

4️⃣ @Function

• 실무에서 scss 함수가 자주 사용되지는 않지만 스타일 시트에서 재사용할 수 있는 복잡한 작업을 수행하고 return 하기 위해 사용.

 

/* @function을 활용해 x가 number인지 확인 후 자동으로 'px'단위를 붙여주기. */

@function unitCheck($x) {

  // 단위체크
  @if(type-of($x)==number) {
    @if(unitless($x)) {
      @return $x+px;
    }
  }

  @return $x;
}

.test {
  font-size: unitCheck(100);
}

 

@function을 통해 재사용 가능한 단위체크 기능을 제작해서 스타일링 하는 방법. CSS컴파일링된 예시와 함께 비교.

 

 

 

🙋🏻‍♀️ 결론

• Sass를 사용하지 않는 회사도 있다고 하지만 내가 본 회사는 대부분 Sass를 기본으로 사용했다.
  물론 tailwind를 사용하거나 CSS변수를 통해 전처리를 하는 회사도 있을 것이다!
  그래도 Sass 기본 문법이 어렵지 않으니 숙지하고 있는 게 좋다고 생각한다. :)
• Sass에서 @mixin은 가장 중요한 기능으로, 스타일시트 전체에서 재사용할 수 있는 스타일 그룹을 정의할 수 있다.
• 자바스크립트와 비슷한 문법으로 @for문을 활용해서 반복문을 실행할 수 있고, @if문을 활용해서 조건문을 실행할 수 있다.
• 해당 게시물은 Sass에 대한 기본기를 설명하는 두번째 발행물으로
  Sass의 기능에 대해 더 알고 싶으시다면 아래 링크에서 이전 내용을 확인할 수 있습니다!

 

[JAY⌨️SCSS] SASS(SCSS) 간단 사용법 첫번째! Nesting, Ampersand, Variable, Operator.