[Sass] 주석(Comments)

시작하기에 앞서

✍️ 해당 글은 .scss 를 기준으로 작성되었습니다!
.scss와 .sass 확장자에 따라 주석이 동작하는 방식에는 차이가 있지만
공통적으로 /**/로 작성되는 주석은 css로 컴파일된다는 점, // 로 작성된 주석은 컴파일 되지 않는다는 점은 동일합니다!

디자인 시스템을 만들면서 scss 사용도 익히는 중이다.
여러 자료들을 참고하던 도중 주석 스타일이 조금씩 달랐다.
어떤 경우에는 어떤 걸 쓰는 지 궁금해서 이번 포스팅에서 다뤄보기로 했다.

Scss에서의 주석

scss에서 사용하는 주석은 js에서 동작하는 방식과 유사하다.

 // 로 시작하는 single-line comment(한 줄 주석)들은 css에서는 silent comment라고도 불리는데, 어떠한 css도 만들지 않기 때문이다.

/**/로 시작하는 multi-line comment(여러 줄 주석)는  statement가 허락되는 곳에 작성된다면 css 주석으로 컴파일된다.

따라서 loud comment라고도 불린다. multi-line comment은 css로 컴파일될 경우 interpolation를 포함할 수도 있는데, 이 경우 주석이 컴파일되기 전에 평가가 된다.

 

기본적으로 multi-line comment은  compressed mode에서는 컴파일되지 않는다.

대신 /*!*/로 작성하면 무조건 css에 컴파일된다.

 

// css 파일에 없는 거랑 마찬가지인 주석 형태

/* compressed mode에서는 컴파일되지 않음 */

/* interpolation 포함 가능:
* 1 + 1 = #{1 + 1} */

/*! compressed mode에서도 포함되는 주석 */

p /* Multi-line comments 는 whitespace를 사용할 수 있는 어디든지 쓸 수 있다  */ .sans {
  font: Helvetica, // single-line comment도 마찬가지다
        sans-serif;
}

Documentation Comments

sass 라이브러리를 사용할 때 라이브러리가 제공하는 mixin, functions, variables 그리고 placeholder selector와 라이브러리 그 자체에 대한 Documentation Comments(문서화용 주석)을 달 수 있다. SassDocs 도구를 활용하면 읽기 쉽게 문서화된 버전을 읽을 수 있다.

 

Documentation Comments은 silent comment에 해당된다.

/// 로 문서화하고자하는 것 바로 위에 작성하면 된다. 문서화된 주석들은 마크다운으로 파싱 된고, annotation을 지원한다.

/// Computes an exponent.
///
/// @param {number} $base
///   The number to multiply by itself.
/// @param {integer (unitless)} $exponent
///   The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

 

🤔 이번에는 간단하게 scss 에서 주석의 차이에 대해서 살펴봤다.
// 은 css 결과에 포함되지 않는 주석, /**/은 compressed mode가 아닌 경우 컴파일되고, /*!*/는 무조건 컴파일되는 주석이다.
다음에는 sassdoc에 대해 더 알아보고 적용을 해보자.

---

📚 References

https://sass-lang.com/documentation/syntax/comments/

Sass: Comments