SASS - @if

조건문을 이용해서 각각 article 값을 바꿔보겠습니다

현재 남아 있는 코드 중 기본값만 냅두고 다 지우겠습니다

@charset "UTF-8";
@import "reset";
@import "mixin";

$bgBody: #eee;
$bgItem: #fff;
$colorH2: aqua;
$interval: 0.2s;

body {
  background: $bgBody;
}

.wrap {
  width: 100%;
  border: 2px solid #bbb;
  padding: 100px;
  display: flex;
  justify-content: center;
  perspective: 600px;

  .item {
    width: 300px;
    padding: 30px;
    background: $bgItem;
    margin: 50px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);

    h2 {
      font-size: 30px;
      font-family: Arial, Helvetica, sans-serif;
      color: #333;
      margin-bottom: 15px;
    }
    p {
      font-size: 14px;
      line-height: 1.3;
      font-family: Arial, Helvetica, sans-serif;
      color: #777;
      margin-bottom: 20px;
    }
  }
}

.item에 hover 적용

&:hover {
      background: #111;

      h2,
      p,
      a {
        color: #fff;
      }
    }

근데 여기서 반대로 설정값을 적용하려면 어떻게 해야할까요

현재 우리가 지정한 변수명은 이렇게 되어있습니다

$bgItem: #fff;

이 변수명을 그대로 h2에 작성합니다

@if $bgItem == #fff {
        color: #333;
      }

만약에 $bgItem이 #fff 컬러값이라면 color #333으로 사용하겠다 라는 뜻을 가집니다

@else {
        color: #fff;
      }

하지만 만약에 $bgItem이 #fff가 아니라면 #fff을 사용하겠다 라는 뜻입니다

h2 {
      font-size: 30px;
      font-family: Arial, Helvetica, sans-serif;
      color: #333;
      margin-bottom: 15px;
      @if $bgItem == #fff {
        color: #333;
      } @else {
        color: #fff;
      }
    }

p 태그에도 그대로 넣습니다