Sass(SCSS) 변수

Sass

Syntactically Awesome Style Sheets

변수

CSS 스타일을 작성하다 보면 속성값을 반복해서 사용하는 경우가 많다.
그 코드가 바뀌면 모든 코드를 수정해야하는데 자주 반복되는 스타일을 수정하는 일은 무척 번거로운 작업이다.

Sass에서는 반복적으로 사용되는 코드 변수를 사용하여 보다 효율적으로 작업할 수 있다.

CSS 코드

div {
	color: red;
    background-color:red;
    box-shadow: 10px 10px 10px red;
    text-shadow: 10px 10px 10px red;
    border: red;
}

같은 색상을 계속 사용하거나 여러요소의 너비나 높이가 같은 경우, 포지션이나 display가 같은 경우 등 변수를 사용하면 더욱 간단한 작업이 가능해진다.

위 코드에서 red를 모두 yellow로 바꿔야 한다면 모든 코드를 일일이 수정해야한다.

변수 선언

$변수명: 속성값;

sass에서 변수를 만들기 위해서는, $기호를 사용
변수는 스타일시트에서 재사용할 정보를 저장하는 방법이다.
색상, 글꼴, 사이즈 등 재사용하고자 하는 모든 css 값은 변수에 저장할 수 있다.

SCSS 코드

$main-color: red;

div {
	color: $main-color;
    backhground-color: $main-color;
    box-shadow: 10px 10px 10px $main-color;
    text-shadow: 10px 10px 10px $main-color;
    border: $main-color;
    
}

위 코드에서 red를 모두 yellow로 바꿔야한다면 변수의 속성값만 변경하면 된다.

⭐ sass 스타일 시트에서의 변수선언이나 변수사용 부분은 컴파일이되면 최종css파일에서 표시X

권고사항

• 변수 사용 시 따로 개수 제한이 정해져 있지는 않지만, 남용하지 않는 것이 좋다.
• 변수명은 사용자가 자유롭게 지정, 그러나 가능한 직관적인 이름을 사용
• 변수명에는 영문자와 숫자, 그리고 -, _를 포함할 수 있다.

// 좋은 예 : 누가 봐도 메인 색상
$main-color : tomato;

//안 좋은 예 : 이 변수의 목적이 뭐야?
$HappyDong: 10px;

---

실습

$main-color: skyblue;
$font-color: white;
$btn-width: 100px;


button {
  
  &:nth-child(1) {
    color: $font-color;
    background-color: $main-color;
    width: $btn-width;
  }
  &:nth-child(2) {
    color: $font-color;
    background-color: $main-color;
    width: 200px;
  }
  &:nth-child(3) {
    color: $font-color;
    background-color: $main-color;
    width: 300px;
  }
}