@if, @else

조건문

@if, @else 를 사용하여 조건문을 사용할 수 있습니다.

scss

$black: #000;
$border: 1px solid red;

@mixin btn_radius($h, $radius: true) {
  padding: 0 20px;
  height: $h;
  line-height: $h;
  background: yellow;
  color: $black;
  text-align: center;
  @if $radius {
    border-radius: $h / 2;
  } @else {
    border: $border;
  }
}

.btn {
  @include btn_radius(30px, true);
}

@mixin position($x, $y, $z) {
  position: absolute;
  left: $x;
  top: $y;
  z-index: $z;
  @if $x == 50% and $y == 50% {
    transform: translate(-$x, -$y);
  } @else if $x == 50% {
    transform: translateX(-$x);
  } @else {
    transform: translateY(-$y);
  }
}

div {
  width: 300px;
  height: 300px;
  background: $black;
  border: $border;
  @include position(50%, null, 2);
}

css

.btn { padding: 0 20px; height: 30px; line-height: 30px; background: yellow; color: #000; text-align: center; border-radius: 15px; }

div { width: 300px; height: 300px; background: #000; border: 1px solid red; position: absolute; left: 50%; z-index: 2; -webkit-transform: translateX(-50%); transform: translateX(-50%); }