변수 사용하기

• 반복적으로 사용되는 값을 재활용하기 위해 미리 변수에 저장해 놓고 변수 이름만 속성 이름 대신해서 사용
• SCSS에서 변수 키워드 지정은 $ 기호를 사용
• 변수를 사용하면 폰트 사이즈, 색상, 크기 등 효율적인 속성 관리가 가능

$ 변수명 : 값

선택자 {
  속성: $변수명
}

예제

index.html

<div class="btns">
    <button class="btn primary">primary button</button>
    <button class="btn confirm">confirm button</button>
    <button class="btn danger">danger button</button>
</div>

style.scss

$primary: royalblue;
$confirm: yellowgreen;
$danger: crimson;
$btn-padding: 10px 30px;

.btns {
  text-align: center;
  .btn {
    border: none;
    text-transform: capitalize;
    font-size: 15px;
    padding: $btn-padding;
    border-radius: 3px;
    color: #fff;
  }
  .primary {
    background-color: $primary;
  }
  .confirm {
    background-color: $confirm;
  }
  .danger {
    background-color: $danger;
  }
}

style.css

.btns {
  text-align: center;
}
.btns .btn {
  border: none;
  text-transform: capitalize;
  font-size: 15px;
  padding: 10px 30px;
  border-radius: 3px;
  color: #fff;
}
.btns .primary {
  background-color: royalblue;
}
.btns .confirm {
  background-color: yellowgreen;
}
.btns .danger {
  background-color: crimson;
}

변수 사용시 장점

• CSS 속성 값의 수정 보완이 필요한 경우 한방에 처리할 수 있다.
• 개별 수정은 되지 않지만 프로젝트 관리 측면에서 일관성있는 관리가 가능하다.

변수 네이밍

• 변수명의 제약은 크게 없지만 가독성을 높이기 위해 2개의 단어가 합쳐진 경우 대시 또는 언더바를 통해 구분 지어 주는 것이 좋음

  • 대시, 언더바를 제외하고 특수기호 또는 숫자로 변수명을 시작해서는 안됨
    

• 속성과 값을 직관적으로 표현하는 단어를 사용하는 것이 바람직

• 예시로 제목의 색상을 변수로 지정한다면

  • heading(제목)+색상(color) = $heading-color

변수 사용 예시

• 자주 사용하는 폰트 색상, 배경 색상, 높이와 너비를 변수로 지정하거나, 자주 사용되는 이미지 경로를 변수로 지정해서 사용할 수 있다.

$heading-color: #000;
$sub-heading-color: #555;
$body-color: #222;
$heading-padding: 10px;

body {
  color: $body-color;
}

.items h1 {
  color: $heading-color;
  padding: $heading-padding
}

.items h2 {
  color: $sub-heading-color;
}

.news h1 {
  color: $heading-color;
  padding: $heading-padding;
}

.news h2 {
  color: $sub-heading-color;
}

$color-primary: #222;
$color-secondary: #333;
$bgc-item: #eee;
$portfolio-item-w: 300px;
$portfolio-item-h: 300px;
$portfolio-images-url: "images/portfolio/";

.portfolio {
  padding: 20px;
  .portfolio-items {
    width: 1200px;
    margin: auto;
    .portfolio-item {
      border: 1px solid #000;
      width: $portfolio-item-w;
      height: $portfolio-item-h;
      background: $bgc-item url($portfolio-images-url + "bg-01.jpg");
    }
  }
}

• 변수에 또 다시 변수를 할당할 수 있음

$crimson: crimson;
$black: #202020;

$color-primary: $crimson;
$color-secondary: $black;

변수의 유효 범위

• 변수의 유효 범위는 모든 선택자에서도 사용할 수 있는 전역 변수(global variable)와 특정 선택자에서만 사용할 수 있는 지역 변수(local variable)로 나뉨
• 지역 변수는 선택자 안에 만들어진 변수로 해당 선택자에서만 사용이 가능하고,
• 전역 변수는 선택자가 없이 독립적으로 만들어진 변수로 모든 선택자가 사용할 수 있다.
• 특별한 경우가 아니라면 굳이 지역변수를 사용할 필요는 없음

// 전역 변수
$crimson: crimson;
$black: #202020;

.portfolio {
  color: $crimson;
  h1 {
    color: $black;
  }
}

// 지역 변수
.portfolio {
  $crimson: crimson;
  $black: #202020;
  h1 {
    color: $black;
  }
}

.headline {
  color: $crimson;  // 오류 발생
}

변수 초기화 !default

• !default는 할당되지 않은 변수의 초기값을 설정함
  • 할당 되어 있는 변수가 이미 할당 되어 있는 변수와 중복된다면 !default를 사용해서 최초에 할당된 변수 값을 사용
• !important 는 최우선 순위 속성으로 !default와 다름
  • !important는 SCSS 에서도 동일하게 사용됨

예시 1

$bgc-color 에 있는 red를 .frame의 배경색으로 사용

style.scss

$bgc-color: red;

.frame {
  background-color: $bgc-color;
}

style.css

.frame {
  background-color: red;
}

예시 2

$bgc-color 에 있는 red를 .frame의 같은 이름의 변수 선언으로 배경색은 blue

style.scss

$bgc-color: red;

.frame {
  $bgc-color: blue;
  background-color: $bgc-color;
}

style.css

.frame {
  background-color: blue;
}

예시 3

!default에 의해 최초에 선언된 $bgc-color 사용

style.scss

$bgc-color: red;

.frame {
  $bgc-color: blue !default;
  background-color: $bgc-color;
}

style.css

.frame {
  background-color: red;
}

[참고] CSS에서 변수 선언

• CSS에서 변수를 사용할 때는 :root라고 된 선택자 안에 --로 시작하는 이름을 주고 콜론 다음에 값을 준다.
• 선언한 변수를 사용할 때는 var(--변수명) 을 사용한다.

:root {
  --primary: skyblue;
}

.btn.secondary {
  background-color: var(--secondary);
}