Sass[SCSS] 기초 이론 2 - 변수(Variables) 알아보기 & 사용하기 (전역변수, 지역변수, 재할당 등)

Sass

Sass[SCSS] 기초 2 - 변수(Variables) 알아보기 & 사용하기 (전역변수, 지역변수, 재할당 등)

우선 Scss에서 가장 많이 쓰는 기능중 하나인 변수입니다.

 

일반 css에서도 변수 선언 방법이 있는데 바로 :root 가상 클래스입니다.

:root {
  --main-color: skyblue;
  --basic-padding: 5px 15px;
}

이런식으로 --main-color 와 --basic-padding 의 변수를 미리 설정해두고 

 

.button {
  background-color: var(--main-color);
  padding: var(--basic-padding);
}

이런식으로 사용합니다.

 

Scss에서도 문법 방식은 다르지만 이와 마찬가지로 비슷하게 사용됩니다.

/* 변수 선언 (Variables) */
$red: rgb(241, 72, 72);
$blue: rgb(49, 102, 247);
$green: rgb(54, 204, 86);

.item-list {
  display: flex;
  list-style: none;
  gap: 15px;
  .item {
    .item-button {
      padding: 5px 10px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      &.red {
        background-color: $red; /* 변수 사용 */
      }
      &.blue {
        background-color: $blue; /* 변수 사용 */
      }
      &.green {
        background-color: $green; /* 변수 사용 */
      }
    }
  }
}

 

Scss는 $red, $blue, $green 이런식으로 변수명 앞에 $를 붙혀줍니다.

그리고 아래에서 css에 대한 값으로 $red, $blue, $green 이렇게 넣어주기만 하면 됩니다.

 

변수명을 지정할때 주의할 점이 있는데

$-color: red; // - (대시&하이픈) 가능
$_padding: 20px 25px; // _ (언더바) 가능
$+padding: 20px 25px; // 특수문자 오류
$2color: red; // 숫자 오류

변수명 가장 앞에 특수문자를 사용하려면 - (대시&하이픈), _ (언더바) 이거 두개만 사용할 수 있고 나머지는 전부 오류가 발생합니다.

앞에 숫자를 사용해도 마찬가지로 컴파일시 오류가 발생해요.

 

그냥 맘편하게 변수를 사용하려면 특수문자나 숫자등을 쓰지 않고 일반 영문으로 변수명을 지정하면 될 것 같네요. :)

굳이 사용하고 싶으면 대시나 언더바를 사용하도록 해요.

 

아래는 컴파일된 결과물과 적용된 화면입니다. 컴파일된 코드를 보면 변수 자체는 컴파일되지 않습니다. (변수 선언이라는 주석아래 바로 .item-list에 대한 css가 나옴)

다만 변수가 사용된 값에 직접 들어가있는걸 확인할 수 있어요.

@charset "UTF-8";
/* 변수 선언 (Variables) */
.item-list {
  display: flex;
  list-style: none;
  gap: 15px;
}
.item-list .item .item-button {
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.item-list .item .item-button.red {
  background-color: rgb(241, 72, 72); /* 변수 사용 */
}
.item-list .item .item-button.blue {
  background-color: rgb(49, 102, 247); /* 변수 사용 */
}
.item-list .item .item-button.green {
  background-color: rgb(54, 204, 86); /* 변수 사용 */
}

구현된 화면

 

 

추가로 변수에 이미지 경로를 지정해서 사용할수도 있습니다.

$image-url: "../images/";

.image-list {
  display: flex;
  list-style: none;
  gap: 15px;
  .image {
    width: 200px;
    height: 200px;
    background-repeat: repeaet;
    background-position: center center;
    background-size: cover;
    &:nth-child(1) {
      background-image: url($image-url + "item_img01.jpg");
    }
    &:nth-child(2) {
      background-image: url($image-url + "item_img02.jpg");
    }
    &:nth-child(3) {
      background-image: url($image-url + "item_img03.jpg");
    }
  }
}

구현된 화면

 

 

좀 더 심화해서 알아보자면 변수를 선언할때 선택자 안에서 선언하여 지역변수로 지정할 수 있는데 지역변수를 바깥에서 사용하면 오류가 발생합니다.

.name {
  $text-color: darkorange; // 지역변수 선언
  strong {
    color: $text-color; // 지역변수 사용
  }
}

.desc {
  span {
    color: $text-color; // 지역변수를 바깥에서 사용
  }
}

잘못된 사용 방법의 예시입니다. 평소에 실무에서 사용을 할때는 주로 전역변수를 사용하고 특별한 경우를 제외하면 지역변수를 잘 사용하진 않습니다.

 

특별하게 지역변수를 바깥에서 사용해야할 경우에는 !global로 전역변수화 시켜줄 수 있습니다.

.name {
  $text-color: darkorange !global; // !global 전역변수
  strong {
    color: $text-color; // global 전역변수 사용
  }
}

.desc {
  span {
    color: $text-color; // global 전역변수를 바깥에서 사용
  }
}

구현된 화면

 

 

마지막으로 Scss에서의 변수도 자바스크립트의 변수와 같이 재할당이 가능합니다. 아래는 예시 코드입니다. :) 

$main-color: rosybrown; // 변수선언
$main-color: brown; // 변수값 재할당
$sub-color: $main-color; // 변수에 변수값 할당

p {
  color: $main-color; // brown
  background-color: $sub-color // brown
}