Sass 파일 구조와 Nesting 문법

Sass란?

Sass (Syntactically Awesome Style Sheets)는 CSS의 확장으로, CSS 작성을 더 쉽고 유지보수 가능하도록 만들어주는 전처리기이다. Sass는 CSS와 거의 동일한 구문을 사용하지만, 변수, 중첩 규칙, mixin 등의 기능을 제공하여 작성된 CSS 코드를 더욱 간결하고 가독성 높게 만든다.

파일 분리

파일명 앞에 _를 붙이면 해당 파일은 컴파일 되지 않으므로 .css 파일이 생성되지 않는다. 필요한 scss 파일에만 _ 안붙이고 @import 하는 방식으로 진행.

Nesting

Nesting 문법을 사용하여 중첩된 스타일 규칙을 작성할 수 있다. CSS의 중첩 규칙과 비슷하지만, Sass에서는 중첩된 선택자 뿐만 아니라 중첩된 속성도 사용할 수 있다. 이를 통해 스타일 규칙을 구성하는 데 필요한 코드 라인 수를 줄이고 가독성을 높일 수 있다.

Sass 속성 중첩 코드

sass

h1 {
    font: {
        family: 'Nanum Ghotic';
        size: 18px;
        weight: 600;
    }
    line-height: 1;
}

css

h1 {
  font-family: 'Nanum Ghotic';
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

위 코드와 같이 CSS 속성 앞에 접두사로 'font-'를 반복해서 썼다면, 속성 중첩 문법을 이용하여 반복하여 작성하지 않아도 된다.

sass

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      display: inline-block;
      margin-right: 10px;
      
      a {
        color: #333;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

nav ul li a {
  color: #333;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

nav 선택자에 대한 스타일을 정의하고, 이를 포함하는 ul 선택자, li 선택자, a 선택자의 스타일을 중첩하여 작성할 수 있다. 또한, &(엠퍼샌드) :hover를 사용하여 a 선택자에 hover 효과를 추가했다.

"&"는 상위 요소에 있는 부모선택자를 가리킨다. 가상 클래스, 가상 요소를 참조가능.

가상 클래스, 가상 요소란?
선택자에 추가되어 특정한 상황에서 스타일을 적용할 수 있는 키워드.

가상 클래스
특정한 상태나 동작이 발생했을 때 적용된다. 일반적으로 :으로 시작하며. 가장 많이 사용되는 가상 클래스는 :hover :active :focus 등이 있다.

a:hover {
  color: red;
}
button:active {
  background-color: blue;
}
input:focus {
  outline: none;
}

가상 요소
요소에 추가되는 클래스가 아니라, 요소의 특정 부분에 스타일을 적용하는 것이다. 일반적으로 ::로 시작하며, ::before ::after 등이 자주 사용된다.

h1::before {
  content: "Title: ";
  font-weight: bold;
}
p::after {
  content: "The end";
  font-style: italic;
}