SASS 제어 지시문 및 표현식 자습서

제어 지시문 및 표현식은 SASS에서 정의된 특정 조건에서만 스타일을 포함하는 데 사용됩니다.

기능적으로 상당히 고급이며 주로 믹스인에 유용합니다. 일반적인 지시문에는 @if , @else , @for 및 @while 가 포함됩니다.

@만약 그리고

@if 및 @else 지시문은 의 if 및 else 문과 유사합니다.
@if는 평가가 false(또는 null)가 아닌 경우 표현식을 취하고 해당 블록에 포함된 스타일을 실행합니다.
@else는 이전@if이 거짓으로 평가된 경우 확인됩니다.

예를 들어:

@mixin heading($size) {
  @if $size == large {
    font-size: 4rem;
  }
  @else if $size == medium{
    font-size: 3rem;
  }
  @else if $size == small {
    font-size: 2rem;
  }
  @else {
    font-size: 1rem;
  }
}

.h1 {
  @include heading(large);
}

.h6 {
  @include heading(small);
}

여기서는 $size를 인수로 받아들이는 제목 믹스인을 사용하고 있습니다. mixin에 전달하는 값에 따라 각 제목에 대해 다른 크기를 가질 수 있습니다.

@을 위한

@for 지시문을 사용하여 지정된 횟수만큼 명령문 그룹을 실행할 수 있습니다. 사실상 이것은 루프입니다.

두 가지 변형이 있습니다. 첫 번째는 through 키워드를 사용하며 명령문을 처음부터 끝까지 실행합니다.
through를 사용하는 예:

@for $i from 1 through 5 {
   .list-#{$i} {
      width: 2px * $i;
   }
}

그러면 다음과 같은 CSS 출력이 생성됩니다.

.list-1 {
  width: 2px; 
}

.list-2 {
  width: 4px; 
}

.list-3 {
  width: 6px; 
}

.list-4 {
  width: 8px; 
}

.list-5 {
  width: 10px; 
}

through 키워드를 to 로 바꾸면 루프가 배타적으로 됩니다. 차이점은 변수가 end와 같을 때 실행되지 않는다는 것입니다.
to를 사용하는 예:

@for $i from 1 to 5 {
   .list-#{$i} {
      width: 2px * $i;
   }
}

그러면 다음 CSS가 생성됩니다.

.list-1 {
  width: 2px; 
}

.list-2 {
  width: 4px; 
}

.list-3 {
  width: 6px; 
}

.list-4 {
  width: 8px; 
}

@동안

대신 @while 지시문을 사용하여 위의 코드를 구현할 수 있습니다. 이름에서 알 수 있듯이 조건이 true를 반환하는 동안 문에서 생성된 CSS를 계속 출력합니다.

구문은 다음과 같습니다.

$i: 1;
@while $i < 6 {
  .list-#{$i} {       
     width: 2px * $i;   
  }
  $i: $i + 1;
}

출력은 동일하므로 구문에 따라 개인 기본 설정을 선택할 수 있습니다.

다음 기사에서는 SASS 보간에 대해 살펴보겠습니다.

결론

이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here

🌎 연결하자

Portfolio

Hashnode

Medium

Github

Codepen