[HTML/CSS] 3-1. Sass란?

Sass란?

 

Sass(Syntactially Awesome StyleSheets) is a stylesheet language that's compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more. all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organizef and make it easy to sharr design within and across projects.

 

CSS

p {
  color: red;
}

p span {
  color: blue;
}

a:hover, a:focus {
  color: blue;
}

 

 

Sass (Nesting 구조)

p
  color: red
  
  span
    color: blue
    
a
  &:hover,
  &:focus
    color: blue

 

 

Scss (Nesting 구조)

p {
  color: red;
  
  span {
    color: blue;
  }
}

a {
  &:hover,
  &:focus {
    color: blue;
  }
}

 

 

---

CSS 코드가 한 파일로 제작된다면?

 

• 가독성 저하, 어디서부터 어디까지가 어떤 스타일을 담당하고 있는지 파악하기 어려움
• 중복 코드 혹은 레거시 코드를 생성하기 쉬움
• 단순 수정에도 전체 코드를 일일이 확인해야 함
• 프로젝트가 커질수록 CSS로 작업하는 속도가 느려짐

-> Sass(Scss) 개발은 선택이 아닌 필수!

 

 

---