조건문은 @if로 시작하여 @else if로 추가하고 @else로 빠져나온다.
조건에 따라 결과 값을 다르게 주고 싶을 때 사용한다.
if
/*
@if (조건1) {
조건이 참일 때 실행 할 구문
}
*/
if else
/*
@if (조건1) {
조건이 참일 때 실행 할 구문
}@else {
조건이 거짓일 때 실행 할 구문
}
*/
if else, if
/*
@if (조건1) {
조건1이 참일 때 실행 할 구문
}@else if(조건2) {
조건2이 참일 때 실행 할 구문
}@else {
모두 거짓일 때 실행 할 구문
}
*/
조건의 ()는 생략이 가능하다. 그리고 논리 연산자인 and, or, not도 사용할 수 있다.
예제를 보면,
@mixin position($x, $y, $z) {
position: absolute;
left: $x;
top: $y;
z-index: $z;
@if $x == 50% and $y == 50% {
transform: translate(-50%, -50%);
}@else if $x == 50% {
transform: translateX(-50%);
}@else if $y == 50% {
transform: translateY(-50%);
}
}
div {
@include position(50%, 50%, 3);
}
이렇게 mixin으로 조건문을 미리 만들어 놓고, include로 top, left, z-index의 값만 적어주면 해당 조건에 맞게 transform 된다.
만약 가로로만 가운데 정렬을 하고싶다면 (50%, null, 3) 을 넣어주면 된다.
css에서는 아래처럼 나타난다.
div {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
transform: translate(-50%, -50%);
}