[SCSS] Variables & Nesting

 

Variables

SCSS에서 변수는 기본적으로 웹사이트에서 가장 중요한 색상이나, 가장 중요한 스타일을 저장하고 싶을 때 사용한다.

 

중요한 변수들을 저장해두는 파일을 생성해야 한다.

_파일이름.scss 파일을 생성한다.

이때 중요한 것은 밑줄(_)이다.

 

밑줄(_)이 있는 파일들은 css로 변하지 않았으면 하는 것들을 의미한다.( = SCSS만을 위한 파일)

 

파일을 생성했으면 $를 사용해 변수를 선언한다.

$bg: #e7473c;
$title: 32px;

 

_파일이름.scss에서 필요한 변수 선언을 마치면 우리는 이 변수들을 사용할 파일에서 @import를 통해 불러와 사용해야 한다.

@import "_파일이름.scss";

body{
  background: $bg;
}

span{
  color: $bg;
}

h1{
  font-size: $title;
}

 

 

꼭 변수 파일을 생성할 필요는 없지만 특정 색깔이나 스타일이 중요하고 반복적으로 사용된다면, 따로 파일을 생성해 @import해주는 것이 더 좋은 방법이다.

만약 변수를 따로 파일을 생성하지 않고 하나의 파일 내에서만 사용한다고 하면, 변수는 선언된 블록 내에서만 유효 범위를 가진다.

 

.block1{
  $color: white;
  background: $color;
}

.block2{
  background: $color;	// 오류 발생. 변수는 선언된 블록 내에서만 유효 범위를 가져 다른 블록에서 사용 불가
}

 

 

Nesting(중첩)

Nesting은 우리가 타겟하는 요소를 더 정확하게 해준다.

Nesting을 통해 상위 선택자의 반복을 줄일 수 있으며, 이를 통해 복잡한 구조를 더 편리하게 사용 가능하다.

 

h2{
  font-size: 32px;
  color: blue;
}

.box{
  margin-top: 5vh;
}

.box h2{
  font-size: 16px;
  color: red;
}

.box button{
  background: yellow;
}

css에서 위와 같이 작성한 코드가 있다.

<div class="box">와 그 내부의 h2나 button의 스타일을 주고 싶다면 모두 따로 작성해야 한다.

하지만 SCSS의 Nesting을 사용하면 더 읽기 쉬운 코드 작성이 가능하다.

 

h2{
  font-size: 32px;
  color: blue;
}

.box{
  margin-top: 5vh;
  
  h2{
    font-size: 16px;
  }
  
  button{
    background: yellow;
  }
}

위 코드는 앞선 CSS를 SCSS로 작성한 코드이다.

.box h2등과 같이 각각 세부적으로 경로를 지정하지 않고 내부에 중첩함으로써 더 간편하게 코드 작성이 가능해졌고, 읽기도 쉬워졌다.

또한 <div>내부의 button을 구분하기 위해 따로 class이름을 지정해주지 않아도 더 쉽게 구분 가능하다.

 

 

& (상위 선택자 참조)

Nesting 내부에서 &키워드는 상위 선택자로 치환된다.

.box{
  margin-top: 5vh;
}

.box .btn{
  color: red;
}

.list li:first-child{
  margin-top: 10vh;
}

CSS로 작성한 예시

 

.box{
  margin-top: 5vh;
  
  &.btn{
    color: red;
  }
}

.list{
  li{
    &:first-child{
      margin-top: 10vh;
    }
  }
}

SCSS로 작성한 예시