SASS(SCSS)는 필요한가?

지금까지 HTML/CSS로 보통으로 어려움없이 코딩하고 있었지만,
Rails 앱의 인터페이스를 만들 때 haml과 scss를 사용할 때
생각한게......

일부러 haml과 scss 기법을 다시 학습하고까지 할 필요가 있을까! ? ! ?

그래서 이번에는 왜 SASS(SCSS)로 기술하는 것이 좋은지 생각해 나가려고 한다.

SASS란?

우선 SASS는 뭐라고 하는 이야기로부터

SASS는 Syntactically Awesome Style Sheet의 약칭입니다.

간단히 번역하면 '문법적으로 멋진 스타일시트'라는 뜻이 된다.

즉, 일반적으로 CSS를 작성하는 것보다 멋지게 보일 수 있습니다.

다

header {
   background-color: gray;
   height: 50px;
   width: 100%;
}

header .header__white {
   font-size: 20px;
   background-color: #fff;
   font-weight: bold;
}

header .header__black {
   font-size: 20px;
   background-color: #black;
   font-weight: bold;
}

그렇다면

header {
   background-color: gray;
   height: 50px;
   width: 100%;
     &__white {
         font-size: 20px;
         background-color: #fff;
         font-weight: bold;
     &__black {
         font-size: 20px;
          background-color: #black;
          font-weight: bold;
}

라는 바람에, 네스트를 사용해 컴팩트하게 기술할 수 있다고 하는 곳이 Awesome인 곳의 하나일 것이다.

폴더로 분할 관리

또 하나 Awesome인 점은, 모듈 마다 필요한 CSS를 폴더를 나누어 관리하는 것에 의해,
하나하나의 폴더를 짧게 깔끔하게 세울 수 있다.

스타일별 관리도 가능하므로 나중에 디자인 변경이나 추가를 하기 쉬워진다.

하지만 컴파일이 귀찮습니다 ...

원래 SCSS를 썼는데, 그대로는 HTML에 적용되지 않습니다.
CSS 파일로 컴파일해야 합니다.

하지만 일일이 CMD나 터미널에 커맨드를 입력하는 것은 번거로움이 걸린다・・・

그렇다면 처음부터 직접 CSS를 써도 좋았던 것은···라고도 생각해 버립니다.

하지만 그런 걱정은 무용하고, 제대로 컴파일을 자동화해 주는 앱이나 확장 기능이 많이 나돌고 있습니다.

내가 VSCode를 사용하고 있기 때문에 확장 'Live Sass Compiler이 매우 편리!



사용법, DL 방법은 아래 링크 참조
htps : // 아사모네. 코 m / 2018/09/30 / 지금 s-vs 코데 /

결론

이번에는 그다지 깊은 파기를 할 수 없었지만, 아직 SASS에는 여러가지 편리 기능이 있어, 시험하는 가치는 많이 있다고 생각한다.

자신이 생각하게, 소규모의 앱을 자신 혼자서 작성하는 분에는, SASS를 기억할 필요는 없을지도 모른다.

그러나 팀에서 개발할 때 소스 제어의 복잡성을 조금이라도 간편하게하기 위해,
다른 사람을 생각해 쓰는 Awesome 코드를 쓸 수 있는 것이 바람직할지도 모른다.