컨트롤 지령 얘기가 낯설었을 수도 있어요.하지만'if','each','for','while'을 언급하면 낯설지 않을 수도 있다.많은 언어에서 이런 것들과 자주 접촉하는데, SASS의 상세한 제어 지령은 SASS에서'if','each','for','while'을 어떻게 사용하는지 소개하는 것이다.

SASS의 if

만약 판단용으로 사용한다면 SASS에 있는 if는 어떻게 써야 합니까?아래와 같다
SASS 코드

p {
	@if 1 + 1 == 2 {
		width:30px;
	}@else {
		width:100px;  
	}
}

컴파일된 CSS 코드

p {
  width: 30px;
}

if가 있으면 else가 있어야 하고'=='등 일련의 판단 기호가 있어야 한다. 다음과 같다.
SASS 코드

p {
	$a:true !default;
	$b:false !default;

	@if not($a) {
		border:1px solid red;
	}@else {
		border:1px solid green;
	}

	div{
	    @if $a or $b {
		width:300px;
	    }
	}

	li{
		height:20px;
		@if $a and $b {
			float:left;
		}
	}
	
}

$width: 5px !default;

.meng {
	height:20px;
	@if $width != 0 {
		border:1px solid red;
	}
}  

$sizeClass: small !default;

.long {
	@if $sizeClass == 'small' {
		padding:5px;
	} @else {
		padding:10px;
	}
}

컴파일된 CSS 코드

p {
  border: 1px solid green;
}
p div {
  width: 300px;
}
p li {
  height: 20px;
}

.meng {
  height: 20px;
  border: 1px solid red;
}

.long {
  padding: 5px;
}

SASS의 each

이것이 바로 순환이라는 뜻입니다. 상세한 여러분은 예를 보면 더욱 직관적입니다. 아래와 같습니다.

그림 순환

SASS 코드

@each $meng in meng1, meng2, meng3, meng4 {
  .#{$meng}-long {
    background-image: url('/images/#{$meng}.png');
  }
}

컴파일된 CSS 코드

.meng1-long {
  background-image: url("/images/meng1.png");
}

.meng2-long {
  background-image: url("/images/meng2.png");
}

.meng3-long {
  background-image: url("/images/meng3.png");
}

.meng4-long {
  background-image: url("/images/meng4.png");
}

그림 병합

SASS 코드

$sprite: long1 long2 long3 long4 long5 !default;

%spriteAll{
    background: url('menglong.png') no-repeat;
}

@each $one in $sprite {
    .#{$one}-two {
        @extend %spriteAll;     
        background-position:0 index($sprite,$one)*(-30px);
    }
}

컴파일된 CSS 코드

.long1-two, .long2-two, .long3-two, .long4-two, .long5-two {
  background: url("menglong.png") no-repeat;
}

.long1-two {
  background-position: 0 -30px;
}

.long2-two {
  background-position: 0 -60px;
}

.long3-two {
  background-position: 0 -90px;
}

.long4-two {
  background-position: 0 -120px;
}

.long5-two {
  background-position: 0 -150px;
}

SASS의 for

for 순환은 두 가지 형식이 있는데 각각 @for $var from through와 @for $var from to입니다. $i는 변수를 나타내고, start는 시작값을 나타내며, end는 끝값을 나타낸다. 이 두 가지 차이점은 키워드through는 end를 포함하고, to는 end를 포함하지 않는다는 것이다.

@for $var from through의 예

SASS 코드

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

컴파일된 CSS 코드

.meng1 {
  width: 2px;
}

.meng2 {
  width: 4px;
}

.meng3 {
  width: 6px;
}

.meng4 {
  width: 8px;
}

.meng5 {
  width: 10px;
}

@for $var from to의 예

SASS 코드

@for $i from 1 to 5 {
	.meng#{$i} {
		height : 2px * $i;
	}
}

컴파일된 CSS 코드

.meng1 {
  height: 2px;
}

.meng2 {
  height: 4px;
}

.meng3 {
  height: 6px;
}

.meng4 {
  height: 8px;
}

SASS의 while

While는 이 문장의 삽입 양식의 계산 결과가false일 때까지 여러 번 출력하는 것을 가리키며, 앞의 몇 개보다 while 순환이 더 이해하기 어렵다.
SASS 코드

$i: 6;
$end : -2;

@while $i > $end {
  .item-#{$i} { width: 2px * $i; }
  $i: $i - 2;
}

컴파일된 CSS 코드

.item-6 {
  width: 12px;
}

.item-4 {
  width: 8px;
}

.item-2 {
  width: 4px;
}

.item-0 {
  width: 0px;
}

SASS 상해의 제어 지령은 여러분께 소개해 드리겠습니다. SASS 상해의 제어 지령은 SASS에서 비교적 고급스러운 부분으로 모든 다른 언어의 기초가 있어야 이해할 수 있고 이전의 SASS 기본 규칙에 대해 어느 정도 알고 있는 동료가 있어야만 이해할 수 있습니다.하지만 젊은이들이 이곳을 볼 수 있다는 것은 이미 대단하다.