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

Tags:

Sass란?

Sass는 햄튼 캐틀린이 설계하고, 나탈리 바이젠바움이 개발한 ‘CSS의 메타언어’이다.

메타 언어는 “어떤 언어에 대해 어떠한 설명을 하기 위한 언어"로, Sass는 “CSS에 대해 기능을 확장한 언어"라고 한다.
CSS를 보다 효율적으로 쓸 수 있도록 한 것이라고 생각하면 된다.

덧붙여서, Sass는 “Syntactically Awesome Style Sheets"의 약자로, “구문적으로 멋있는 스타일 시트"라는 의미이다.

CSS와 무엇이 다른가?

Sass는 CSS의 메타 언어이기 때문에 “CSS에 대해 기능을 확장한 언어"이다.

보통은 CSS에서도 문제 없게 작업을 할 수 있지만, 그 양이 방대해져 가면서 데려 힘들어 옵니다. 또 수정이 있을 때에 하나하나 수정할 필요가 있어, 수고가 걸려 버립니다.

보통은 CSS에서도 문제 없게 작업을 할 수 있지만, 그 양이 방대해 지면서 점점 힘들어 지는데, 수정이 있을 때에 하나하나 수정해야 해서 번거로움이 발생하게 된다.

Sass를 사용하게 되면, 일반적인 작성해야 하는 양을 줄어 들고, 수정이 있을 때도 CSS보다 수정 범위를 줄일 수 있다.

이와 같이, CSS의 약점을 보완하고, 보다 기능을 충실시킨 것이 Sass 이다.

SASS와 SCSS는 무엇이 다른가?

Sass에는 실은 기법이 2개 있어, “SASS기법"과 “SCSS기법"이 있다.

처음에는 「SASS기법」이 이용되고 있었습니다만, 통상의 CSS의 쓰는 법을 매우 간략화해 쓰여져 있어, 그 때문에 CSS의 쓰는 방법과 달리 알기 어려워서 그다지 보급되지 않았습니다.

처음에는 “SASS기법"만 사용되었지만, 일반적인 CSS의 작성하는 법을 매우 간략화하여 작성되어, CSS의 작성 방법과 달라 알기 어려워서 널리 보급되지 않았다.

그 후 CSS를 작성 방법과 비슷한 “SCSS 기법"이 만들어 졌고, 그것이 널리 보급되어 지금에 이른다. 따라서, Sass라고 불리지만 파일 확장자는 “.scss"이 된다.

Sass 도입의 단점

Sass 도입에 있어서 모든 것이 좋은 면만이 아니다. 조금 단점도 있다

환경 구축이 번거롭다?

Sass를 사용하려면 환경 구축이 필요하다. 여기서 Sass의 도입을 망설이는 되는 사람이 많을 것이다.

하지만, 이제는 Visual Studio Code 의 Easy Sass와 Live Sass Compiler라는 확장 기능을 사용하면, 간편하게 Sass 를 사용할 수 있게 되므로 환경 구축의 수고를 조금 줄일 수 있다.

학습 비용이 많이 든다?

새롭게 Sass에 대한 기법을 배워 가기 위해 학습 비용이 걸린다.

그러나, 지금 Sass를 배우는 것으로 향후 코딩의 효율화를 도모할 수 있다고 생각하면 학습 비용이 걸려도 배운 것이 좋다고 생각한다.

환경 구축이 필요하거나 학습 비용이 걸리지만, 그것을 웃도는 정도의 메리트가 있기 때문에 여기서 포기하지 않고, 도입의 고려해 볼만 하다.

Sass 도입의 장점

Sass 도입의 큰 메리트를 2가지를 소개한다.

작업 효율이 높아짐

Sass 도입하여 가장 먼저 느끼는 장점은 작업 효율이 올라가는 것이다. CSS에 비해, 코드의 기술량이 압도적으로 적어지기 때문에, 코딩이 매우 편해진다.

또한, 복잡한 코드에서도 하나로 정리해 두고, 나중에 재사용하는 것도 간단하게 호출할 수 있으므로, 일단 Sass를 사용하게 되면 원래의 CSS 작성하는 것으로 돌아가고 싶지 않게 된다.

유지보수성 향상

Sass에서는 자주 사용하는 사이트의 메인 컬러와 서브 컬러, 사이트의 컨테이너 폭 등을 변수로 지정해 둘 수 있다.

예를 들어, 만약 나중에 “메인 칼라를 빨강으로부터 오렌지로 변경하고 싶다"고 한다면, 변수의 1개를 변경하는 것만으로 관련 CSS를 모두 수정을 할 수 있게 된다.

CSS에서는 수정 모두 수정해야 하기 하지만, Sass로 작성하는 것은 나중의 변경에도 있어서도 편해지므로, 유지보수성이 향상된다.

Sass의 주요 기능

Sass의 기능은 많이 있지만, 몇가지 편리하다고 생각되는 대표로 4가지를 소개한다.

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

Sass는 부모와 자식 관계에 있는 셀렉터를 중첩(nested) 구조로 작성할 수 있다.

CSS에서는, 부모의 요소로부터 대상의 요소까지의 셀렉터를 모두 몇번이나 써야 하기 때문에, 아래와 같이 필연적으로 코드의 기술량이 증가해 버린다.
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에서는, 중첩을 사용하는 것으로 정리하여 스타일을 기술하는 것이 가능하므로, 코드의 기술량이 줄일 뿐만 아니라, 부모와 자식 관계도 알기 쉽게 된다.
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으로 수정하는 것만으로, 수정 공수를 대폭 줄일 수 있다.

변수 사용 가능

Sass는 변수를 활용할 수 있다.

자주 사용하는 사이트의 메인 칼라나 서브 칼라, 사이트의 컨테이너 폭등을 변수로 지정해 두는 것으로, 몇번이나 반복되어 작성될 곳에 이용할 수 있다.
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로 컴파일하면 아래와 같이 되어, 각 색이 지정한 대로 반영되고 있는 것을 알 수 있다.
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)을 사용

Sass는 믹스인(mixin)을 이용할 수 있다.

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

예를 들면, 사이트에서 사용하는 버튼의 스타일을 다른 페이지로 사용하고 싶지만, 여기에서는 색만 바꾸고 싶은 경우 있다. 그러나, 색이 다를 뿐이지만 버튼 자체의 레이아웃에 관한 기술도 해야 하기 때문에 코드량이 늘어나 버린다.
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;
  /* 여기까지는 동일하다. */
}

믹스 인(mixin)을 사용하면 스타일의 위치는 믹스 인(mixin)으로 정의된 스타일을 호출하여, 새로 색의 스타일을 작성하면 된다.

따라서 다음과 같이 작성하면, 이전의 CSS와 같은 결과가 된다. 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"를 수정하면 되므로 해당 부분을 찾기 쉽고 관리가 쉬워진다.

파일 자체는 각각 분할되어 있지만, 궁극적으로 하나의 스타일 시트로 묶을 수 있다.

여기서는 예로서 알기 쉽도록 위와 같이 파일 나누고 있지만, 실제로는 기능별이거나, 레이아웃별, 칼라용의 파일등으로 나누거나 한다.




최종 수정 : 2024-01-18