[SASS - SCSS] 1-2. 변수와 중첩 내용 정리

1. 변수

SASS에서도 반복적으로 많이 사용되는 부분입니다. 예를 들어 font 모양이나 색상, 스타일 등을 변수로 지정해 놓고 반복적으로 사용되는 값을 변수로 변경해주면 간단하게 CSS를 제어할 수 있습니다.

 

$font-stack: "Noto-sans", sans-serif;
$base-color: red;

body {
    font: 100% $font-stack;
    color: $base-color;
}

$font-stack에는 Noto-sans, sans-serif 글꼴 변수를 부여하고,

$base-color에는 쉽게 red 색상으로 지정하였습니다.

 

위의 내용을 컴파일을 하면 아래와 같은 내용으로 css파일을 내용으로 컴파일이 됩니다.

body{
  font:100% "Noto-sans",sans-serif;
  color:red
}

 

body 태그에 font 속성에 noto-sans를 적용하고, color: red라는 값이 적용된 것을 볼 수 있습니다. 위의 변수 부분만 알고 있어도 CSS를 일일이 길게 작성하지 않아도 됩니다. 다른 태그 등의 지정된 배경 색상 등의 속성을 변수로 지정해주면서 변수에 있는 속성만 변경하면 전체 CSS의 속성을 한 번에 변경해 줄 수 있습니다.

 

2. 중첩

중첩적인 표현을 위해 하위 선택자를 많이 사용할 수 밖에 없는데, 상위 선택자의 반복을 피하고 조금 더 복잡한 구조를 편리하게 작성할 수 있습니다.

<nav>의 하위 선택자인 ul li a의 CSS 속성을 아래와 같이 작성할 수 있습니다.

 

 

nav .gnb{list-style:none}
nav .gnb li{display:inline-block}
nav .gnb li a{display:block;padding:7px 5px;margin:15px 12px;color:#ccc;text-decoration:none}
nav .gnb li a:hover{border-bottom:1px solid red;color:red}

 

중첩이라는 것은 알을 품는 형태, 하위 선택자들을 하나씩 안에 품는다는 의미를 지니면 조금 이해하기 쉽습니다.

 

장점으로는 코드의 길이를 많이 줄일 수 있고, HTML 각 태그에 정확한 값을 지정해 줄 수 있습니다. 

예를 들어  <nav>와 <aside>에 gnb가 동일하게 있는 경우에는 <nav>와 <aside>태그에 별도 속성을 확실하게 구분하여 처리할 수 있는 장점입니다.

nav{background-color:#eee;height:100px}
nav .gnb{list-style:none;float:right}
nav .gnb li{display:inline-block}
nav .gnb li a{display:block;padding:7px 5px;margin:15px 12px;color:#ccc;text-decoration:none}
nav .gnb li a:hover{border-bottom:1px solid red;color:red}

aside{width:250px;float:left}
aside .gnb{list-style:none;padding:0;margin-top:20px}
aside .gnb li a{display:block;width:100px;padding:7px 12px;color:#ccc;text-decoration:none}
aside .gnb li a:hover{border:1px solid orange;color:orange}

하위 선택자들을 중첩하여, 개별적인 속성들을 하나씩 적용할 수 있게 됩니다. 중첩을 이용해서 단순하게 처리된 내용을 확인할 수 있습니다. gnb의 각 상위 선택자를 설정한 후에 간단하게 처리가 가능하니 참고하시면 좋을 것 같습니다.