[C.S] SASS?? SCSS? 그 둘의 차이점?? 장단점??

SASS 란???

• Sass는 “Syntactically Awesome Style Sheets"의 약자로, “구문적으로 멋있는 스타일 시트"라는 의미이다.
• Sass는 css의 메타언어이다.
• 메타 언어는 "어떤 언어에 대해 어떠한 설명을 하기 위한 언어" 로 Sass 는 CSS에 대해 기능을 확장한 언어이다.
  (CSS를 보다 효율적으로 쓸수 있도록 한것이라고 생각하면 된다.)

 

CSS와의 차이점?

• Sass 는 css의 메타 언어이기에 CSS에 대해 기능을 확장한 언어이다.
• CSS 에서도 문제 없게 작업을 할 수 있지만 CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해지는데 Sass 를 사용하게 되면 작성해야 하는 양이 줄어들고 수정이 있을 때도 css 보다 수정 범위를 줄일 수 있다.
• 따라서 CSS 의 약점을 보완하고 보다 기능을 충실시킨것이 Sass 이다.

 

SASS와 SCSS의 차이점???

• Sass 에도 기법이 2개로 나눠지는데 "SASS 기법" 과 "SCSS" 기법이다.
• 처음에는 “SASS기법"만 사용되었지만, 일반적인 CSS의 작성하는 법을 매우 간략화하여 작성되어, CSS의 작성 방법과 달라 알기 어려워서 널리 보급되지 않았다.
• CSS를 작성 방법과 비슷한 “SCSS 기법"이 만들어 졌고, 그것이 널리 보급되어 지금에 이른다. 따라서, Sass라고 불리지만 파일 확장자는 “.scss"이 된다.

 

SASS의 특징??

1. 호환성: 모든 버전의 CSS와 완벽하게 호환된다.
2. 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.
3. 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다. 
4. 확장성: Sass 기반의 프레임워크가 다수 존재한다.
5. 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다. 
6. 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다. 

---

Sass 도입의 장단점??

Sass 도입의 장점??

1. 작업 효율이 높아진다.
   • Sass 도입하여 가장 먼저 느끼는 장점은 작업 효율이 올라간다는 것
   • css 에 비해 코드의 기술량이 압도적으로 적어지기 때문에 코딩이 매우 편해진다.
   • 복잡한 코드에서도 하나로 정리해 두고, 나중에 재사용 하는 것도 간단하게 호출 할 수 있기에 간편하다.
2. 유지보수성 향상
   • Sass 에서는 자주 사용하는 사이트의 메인컬러와 서브 컬러, 사이트의 컨테이너 폭 등을 변수로 지정해 둘 수 있음 만약 나중에 “메인 칼라를 빨강으로부터 오렌지로 변경하고 싶다"고 한다면, 변수의 1개를 변경하는 것만으로 관련 CSS를 모두 수정을 할 수 있게 된다.

Sass 도입의 단점???

1. 환경 구축이 번거롭다?
   • Sass를 사용하려면 환경 구축이 필요하다. 여기서 Sass의 도입을 망설이는 되는 사람이 많을 것
   • 이제는 Visual Studio Code 의 Easy Sass 와 Live Sass Compiler라는 확장 기능을 사용하면, 간편하게 Sass 를 사용할 수 있게 되므로 환경 구축의 수고를 조금 줄일 수 있다.
2. 학습비용??
   • Sass에 대한 기법을 배워 가기 위해 학습 비용이 걸린다.
   • 그러나, 지금 Sass를 배우는 것으로 향후 코딩의 효율화를 도모할 수 있다고 생각하면 학습 비용이 걸려도 배운 것이 좋다고 생각한다.
   • 환경 구축이 필요하거나 학습 비용이 걸리지만, 그것을 웃도는 정도의 메리트가 있기 때문에 여기서 포기하지 않고, 도입의 고려해 볼만 하다.

---

Sass의 주요 기능!!

중첩 구조(중첩)의 설명 단순화

• Sass는 부모와 자식 관계에 있는 셀렉터를 중첩(nested) 구조로 작성할 수 있다.
• CSS에서는, 부모의 요소로부터 대상의 요소까지의 셀렉터를 모두 몇번이나 써야 하기 때문에, 아래와 같이 필연적으로 코드의 기술량이 증가해 버린다.

ex) style.css

section {
  margin-bottom: 100px;
}
section h1 {
  font-size: 24px;
}
section p {
  margin-bottom: 20px;
}
section a {
  color: red;
}
section a:hover {
  opacity: 0.4;
}

 

• Sass에서는, 중첩을 사용하는 것으로 정리하여 스타일을 기술하는 것이 가능하므로, 코드의 기술량이 줄일 뿐만 아니라, 부모와 자식 관계도 알기 쉽게 된다.

ex2 ) style.scss

section {
  margin-bottom: 100px;
  h1 {
    font-size: 24px;
  }
  p {
    margin-bottom: 20px;
  }
  a {
    color: red;
    &:hover {
      opacity: 0.4;
    }
  }
}
//section을 .test로 변경하고 싶다면, 
//1행째의 section을 .test으로 수정하는 것만으로, 수정 공수를 대폭 줄일 수 있다.

 

변수 사용 가능

• 자주 사용하는 사이트의 메인 칼라나 서브 칼라, 사이트의 컨테이너 폭등을 변수로 지정해 두는 것으로, 몇번이나 반복되어 작성될 곳에 이용할 수 있다

ex) style.scss

// 컬러 설정
$main-color: blue;
$sub-color: gray;
$link-color: red;

// 사용 예
section {
  background-color: $main-color; // 메인 컬러
  margin-bottom: 100px;
  h1 {
    font-size: 24px;
    background-color: $sub-color; // 서브 컬러
  }
  p {
    margin-bottom: 20px;
  }
  a {
    color: $link-color; // 링크 컬러
    &:hover {
      opacity: 0.4;
    }
  }
}

 

• CSS로 컴파일하면 아래와 같이 되어, 각 색이 지정한 대로 반영되고 있는 것을 알 수 있다.
  ex2)style.css

section {
  background-color: blue; 
  margin-bottom: 100px;
}
section h1 {
  font-size: 24px;
  background-color: gray;
}
section p {
  margin-bottom: 20px;
}
section a {
  color: red;
}
section a:hover {
  opacity: 0.4;
}

• 수정이 있어도 변수로 해 두는 것으로 최소한의 수정량으로 작업이 끝나기 때문에, 영향 범위가 큰 것은 변수로 해 두는 것을 추천한다.

 

믹스 인 (mixin)을 사용

• 믹스인(mixin)은 정의한 CSS 스타일(사이트에서 사용하는 버튼 디자인 등)을 다른 곳에서도 사용할 수 있도록 하는 기능이다.
• ex) style.css

.button01 {
  background-color: blue;
  /* 여기 아래부터 동일하다. */
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
  /* 여기까지는 동일하다. */
}

.button02 {
  background-color: gray;
  /* 여기 아래부터 동일하다. */
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
  /* 여기까지는 동일하다. */
}

• ex2) style.scss

// 버튼의 스타일 설정
@mixin button {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

.button01 {
  background-color: $main-color;
  @include button; //@include으로 버튼의 스타일을 불려온다.
}

.button01 {
  background-color: $sub-color;
  @include button; //@include으로 버튼의 스타일을 불려온다.
}

 

파일을 분할하고 관리하기 쉽다.

• Sass는 파일을 분할하고 관리를 쉽게 할 수 있다.
• 파일을 아래와 같이 각각의 정리로 분할할 수 있다.
  •  _header.scss
  • _body.scss
  • _footer.scss
  • _sidebar.scss
• 헤더의 작성해야 한다면 “_header.scss"를 수정하면 되므로 해당 부분을 찾기 쉽고 관리가 쉬워진다.
• 파일 자체는 각각 분할되어 있지만, 궁극적으로 하나의 스타일 시트로 묶을 수 있다.
• 여기서는 예로서 알기 쉽도록 위와 같이 파일 나누고 있지만, 실제로는 기능별이거나, 레이아웃별, 칼라용의 파일등으로 나누거나 한다.

 

*참고문헌

SASS(SCSS)란? 사용의 장점을 간단하게 설명