[SASS/SCSS]작성법 1 - 변수 사용하기

SASS - CSS 전처리기로, 중첩이나 조건문,반복문 등 다양한 기능을 통해 편리하게 작성 후 컴파일을 통해 CSS로 변환해 사용합니다.

 

SASS와 SCSS는 거의 같지만 SCSS는 CSS와 거의 가까운 문법으로 SASS의 기능을 제공합니다. 

 

 

- 변수 선언 및 사용하기 

$sass-color : red; 

 

이와 같이 '$'를 붙여 변수를 선언합니다. 

 

그 후 코드에 

h1 {

  color: $sass-color;

}

 

와 같이 '$'를 붙여 변수명을 이용해 사용합니다. 

 

실제 적용되는 코드는 

 

h1 {

  color : red;

}

 

로 적용됩니다. 

 

 

변수 선언의 위치에 따라 사용할 수 있는 범위가 지정됩니다.

 

{}안에 선언되면 {}안에서만 사용됩니다.(지역변수 - 해당 지역에서만 사용가능)

 

그렇기 때문에 보통 맨위에 {} 밖에 변수를 선언하지만 (전역변수 - 어디서나 사용가능)

 

{}안에 선언후 어디서나 쓰기 위해서는 

 

!global 키워드를 사용해서 전역변수로 만들어 줍니다.  

 

 

 

예)

이렇게 쓰면 오류가 납니다.

 

h1{
	$color: red;
    color: $color;
}
.box{
	background: $color;
}

 

 

아래와 같이 전역변수로 선언하면 정상적으로 사용 가능합니다.

 

h1{
	$color: red !global;
    color: $color;
}
.box{
	background: $color;
}

2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 2 - 선택자 중첩하여 작성하기