SCSS 문법 (Nesting)

SCSS는 CSS의 부족한 부분을 채줘주기 위한 CSS의 확장언어이다. 

• 중첩 Nesting
• 변수 Variable
• 모듈화 Modularity
• 믹스인 Mixins
• 확장&상속 Extend&inheritance
• 연산자Operators

 

중첩(Nesting)

상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성할 수 있습니다.

이것은 선택자나 속성의 관계를 중첩 형태로 표현된 문법입니다. 

( 단, 지나치게 중첩된 규칙은 유지하기 어려운 것으로 판명될 수 있고, 나쁜 습관으로 간주되는 CSS를 초래할 수 있음 !)

// CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

<ul>, <li> 및 <a> 선택자가 <nav>내부에 중첩되어 있음을 알 수 있다.

SCSS의 중첩규칙을 사용해 <nav>부모 선택자의 중복 작성을 피하고, 선택자 사이의 관계를 보기 쉽게 만들 수 있다.

 

 

 

속성중첩

CSS의 공통된 네임스페이스 속성을 중첩할 수도 있다.

'font-'로 시작하는 속성을 살펴보면 아래와 같은데,  SCSS 문법을 사용하면 'font-' 를 중복해서 사용하지 않아도 된다.

• font-family
• font-size
• font-style
• font-weight

h1 {
    font: {
        family: 'Malgun Gothic';
        size: 25px;
        style: normal;
        weight: bold;
    }
    line-height: 1;
}

 

 

 

리액트 책을 공부하면서 SCSS에 대한 내용을 접하게 되어 정리해 보았다. 더 많은 내용들이 있지만 지금 내가 사용할 문법의 내용이라면 SCSS의 중첩정도 일 것 같아서 간단하게만 작성했다. 아래의 페이지에 가면 더 많은 내용들을 볼 수 있다. 처음부터 모든 것을 다 알 수는 없으니, 하나씩 차근차근 알아가자 

 

 

 

참고 

• https://www.biew.co.kr/entry/Sass%E3%86%8DSCSSSASS-%EB%AC%B8%EB%B2%95-%EC%A4%91%EC%B2%A9%EA%B7%9C%EC%B9%99%EA%B3%BC-%EC%84%A0%ED%83%9D%EC%9E%90?category=314988 
• https://sass-lang.com/guide