주석


SCSS에서 주석은 두가지 방식으로 작성된다.


// 한 줄 주석

/* 여러 줄 주석 */


컴파일 하고 난 뒤에는 여러 줄 주석은 남아있지만 한 줄 주석은 사라진다.


그러므로 최종 css 출력물에는 없어도 되는 SCSS만을 위한 주석 내용은 한 줄 주석으로 작성하면 되고, CSS에도 보여져야 하는 주석 내용은 여러 줄 주석으로 작성하면 된다.




변수


스타일을 지정하다 보면 반복적으로 사용되는 값들이 많다.
이런 경우 값을 변수로 지정해주면 변경 시점에 해당 변수의 내용만 수정하여 모든 값을 한번에 변경할 수 있다.



-변수를 선언하는 방법


// $변수명 : 값;

$color1 : red;
$color2 : #fff;



-변수를 사용하는 방법


div{
  background : $color1;
  color : $color2;
}



이렇게 배경색과 글자색이 지정된다.


CSS에서는 아래처럼 보여진다.


div{
  background: red;
  color: #fff;
}



변수에는 지역변수와 전역변수가 있는데,


// 전역변수 - 모든 영역에서 사용가능
$color1: red;

div{
    // 지역변수 - 해당 중괄호 안에서만 사용가능
    $color2: #fff;
    background: $color1;
    color: $color2;
}



지역변수를 전역변수로 변경해주고 싶다면 변수 선언 뒤에 !global을 붙혀주면 된다.


div{
    $color2: #fff !global;
    background: $color1;
    color: $color2;
}




중첩


SCSS에서는 html처럼 중첩하여서 구조화 시킬 수 있다.
중첩 할 때에 {}중괄호를 사용한다.



nav{
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        display: inline-block;
    }
    a{
        display: block;
        padding: 5px 10px;
        text-decoration: none;
    }
}


CSS로는 아래처럼 적용된다.



nav ul {
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
}



이렇게 중첩을 이용하여 구조를 직관적으로 한 눈에 알아볼 수 있고, 선택자가 불필요하게 반복적으로 쓰이는 걸 줄여준다.