SCSS

변수

전역 변수

• 문서의 최상위에서 바로 작성한 변수
• 어떤 규칙도 포함되지 않고, 문서 어디서나 사용이 가능

$url-sprite: '../img/'; //전역 변수
$color-red: #ff0000; //전역 변수
$width: 50%; //전역 변수

div {
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

---

지역 변수

• class | id가 선언된 블록 코드 { } 내에서만 유효 범위를 가짐
• 정의한 블록의 상위 블록에서 절대사용할 수 없음
• !global 플래그를 사용하면 전역 변수로 사용할 수 있다.*

div {
    $url-sprite: '../img/'; //지역 변수
    $color-red: #ff0000; //지역 변수
    $width: 50% !global; // !global 전역 변수
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

---

변수 재할당

• 변수에 변수를 재할당할 수 있다.
• 변수를 참조하기 전 가장 나중에 작성한 값이 변수의 값이 된다.

$width: 100%;
$box-width: $width;

.box-width {
    width: $box-width;
}

$content: "환영합니다";
$content: "안녕하세요"; // 변수 재정의

#main {
  content: $content; // "안녕하세요"
}

$content: "또 봅시다"; // 다시 변수 재정의

#footer {
  content: $content; // "또 봅시다"
}

---

!default (변수 기본값 정의)

!default 플래그를 사용해서 할당되지 않은 변수의 초기값을 설정할 수 있다.

값이 이미 있다면 !default 값을 무시하고, 값이 없다면 !default 값을 할당하라는 의미이다.

‘변수와 값을 설정하겠지만, 혹시 기존 변수가 있을 경우는 현재 설정하는 변수의 값은 사용하지 않겠다’는 의미로 쓸 수 있다.

할당되어 있는 변수의 기존 할당 값을 초기 값으로 사용한다.

$content: "Hello World!";
$content: "환영합니다";
$content: "안녕하세요" !default; // 재할당 무시

#main {
  content: $content; // "환영합니다"
}

$content: "Hello World!";
$content: "안녕하세요" !default; // 재할당 무시
$content: "환영합니다";

#main {
  content: $content; // "환영합니다"
}

변수를 아직 정의하지 않았거나, 변수를 정의했지만 null인 경우, 값이 없다고 판단한다.

$content: null;
$content: "안녕하세요" !default; // 기본값 할당

#main {
  content: $content; // "안녕하세요"
}

---

#{ } (변수 문자 보간)

변수 값을 문자열로 넣을 수 있따.

$line-left: left;
$value25: 25;
$value77: 77;

.box-string_v1 {
    border-#{$line-left}: 1px solid #333;   //문자 보간
}

// 숫자값인 변수를 + 연결하면 연산되어 102 값이 나옵니다.
.box-variables {
    width: $value25 + $value77 + px; 
}

// 문자 보간으로 변수를 + 연결하면 문자값인 2577 값이 나옵니다.
.box-string_v2 {
    width: #{$value25} + #{$value77} + px;