sass
루프 및 조건

While 루프

@while 지시문은 지정된 조건이 거짓이 될 때까지 코드 블록을 반복합니다. 다음 예제에서이 루프는 $font-size <= 18 까지 실행되고 $font-size <= 18 의 값은 $font-size 씩 증가합니다.

$font-size: 12;

@while $font-size <= 18 {
    .font-size-#{$font-size} {
        font-size: ($font-size * 1px);
    }

    $font-size: $font-size + 2;
}

위의 코드 출력

.font-size-12 {
  font-size: 12px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-18 {
  font-size: 18px;
}

for 루프

@for 지시문을 사용하면 정해진 양의 반복을 위해 코드를 반복 할 수 있으며 두 가지 형식이 있습니다.

• @for <var> from <start> through <end> {}
• @for <var> from <start> to <end> {}

두 가지 형태의 차이점은 through 와 to이다 . 키워드를 통해이 포함 <end> 곳에는 않을 것이다 루프; through를 사용 하는 것은 C ++, JavaScript 또는 PHP와 같은 다른 언어에서 >= 또는 <= 을 사용하는 것과 같습니다.

노트

• <start> 와 <end> 는 모두 정수를 반환하는 정수 또는 함수 여야합니다.
• <start> 가 <end> 보다 크면 카운터는 증가 대신 감소합니다.

SCSS 예제

@for $i from 1 through 3 {
  .foo-#{$i} { width: 10px * $i; }
}

// CSS output
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }

조건부 지시문 (if)

@if control 지시문은 주어진 표현식을 평가하고 false 아닌 다른 것을 반환하면 스타일 블록을 처리합니다.

저음의 예

$test-variable: true !default

=test-mixin
  @if $test-variable
    display: block
  @else
    display: none

.test-selector
  +test-mixin

SCSS 예제

$test-variable: true !default

@mixin test-mixin() {
  @if $test-variable {
    display: block;
  } @else {
    display: none;
  }
}

.test-selector {
  @include test-mixin();
}

위의 예제는 다음 CSS를 생성합니다.

.test-selector {
  display: block;
}

각 루프

@each 지시어를 사용하면 모든 목록이나지도를 반복 할 수 있습니다. @each $var or <list or map> {} 의 형태를 취합니다. 여기서 $var 는 임의의 변수 이름이 될 수 있고 <list or map> 은 <list or map> 를 반환하는 모든 것일 수 있습니다.

다음 예제에서 루프는 $authors 목록을 반복하여 각 항목을 $author 할당하고 그 $author 값을 사용하여 스타일 블록을 처리 한 다음 목록의 다음 항목으로 진행합니다.

SCSS 예제

$authors: "adam", "steve", "john";
@each $author in $authors {
    .photo-#{$author} {
      background: image-url("avatars/#{$author}.png") no-repeat
    }
}

CSS 출력

.photo-adam {
  background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
  background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
  background: image-url("avatars/john.png") no-repeat;
}

복수 과제

다중 할당을 사용하면 @each 지시문에 여러 변수를 선언하여 모든 변수에 쉽게 액세스 할 수 있습니다.

중첩 목록

중첩 된 모든 요소에 쉽게 액세스하려면 각 중첩 요소와 일치하는 별도의 변수를 선언 할 수 있습니다. 올바른 양의 변수와 중첩 된 요소가 있는지 확인하십시오. 다음 예제에서는 각 루프가 중첩 된 세 개의 요소가 포함 된 세 요소의 목록을 반복합니다. 잘못된 변수를 선언하면 컴파일러 오류가 발생합니다.

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

지도

복수 할당은지도에도 적용되지만 키에 액세스하는 변수와 값에 액세스하는 변수라는 두 가지 변수로만 제한됩니다. $key 와 $value 의 이름은 다음 예제에서 임의적입니다 :

@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {
  .order-#{$key} {
    order: $value;
  }
}

지도 / 목록 값이있는 각 루프

아래의 예제에서 map $color-array 값은 쌍의리스트로 취급됩니다.

SCSS 입력

$color-array:(
  black: #4e4e4e,                       
  blue: #0099cc,
  green: #2ebc78
);
@each $color-name, $color-value in $color-array {
  .bg-#{$color-name} {
    background: $color-value;
  }
}

CSS 출력

.bg-black {
  background: #4e4e4e;
}

.bg-blue {
  background: #0099cc;
}

.bg-green {
  background: #2ebc78;
}