📌 퍼블리싱 과제 선택사항 중에 css 전처리기를 사용하라는 사항이 있었다. 따라 styled-component 만 사용해 봤던 나에게는 다른 좋은 기회가 찾아왔고, scss 를 사용하여 스타일을 작성해 보기로 하였다.
🤔 리액트 프로젝트를 할때, styled-component vs scss 를 고민 하였고
다른 개발자 분들은 어떤걸 더 선호하는지에 대한 토론글을 찾았을땐
scss 가 압도적으로 많았다.
결국은 나에게 익숙한 styled-component 를 사용하였지만, 한편으론 "scss 의 어떤 면때문에 압도적으로 scss 가 더 편하다고 하는걸까 ?" 라는 의문점을 갖고 있었다.
scss 를 검색하면 그와 동시에 sass 에 대한 글도 많이 보인다. 이 둘은 어떤 차이점이 있을까?
🎈sass vs scss 의 차이점?
-> scss는 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장 하였다. CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다. SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.
1) 구문 스타일
📍 Scss : {} 중괄호 와 , ; 세미콜론을 사용한다.
📍 Sass : 중괄호가 아닌 들여 쓰기를 사용
ex) scss
.background {
width: 100px;
float: left;
li {
color: red;
&:last-child {
background-color:yellow;
}
}
}ex) sass
.background
width: 100px;
float: left;
li
color: red;
&:last-child
background-color:yellow;2) mixin 문법
-> styled-component 를 사용할때 , 중복된 스타일을 방지 하기 위해
중복되는 스타일 코드들만 컴포넌트로 뺄수 있었다는게 가장 큰 장점으로 느꼈다.
하지만 scss 도 @mixin이라는 문법을 사용하여 중복되는 스타일을 따로 작성하고,
@include 로 필요한 부분에 넣을수 있었다.
📍 Scss : @mixin 으로 선언하고 @include 로 적용시킨다.
📍 Sass : = 로 선언하고 + 로 적용시킨다.
ex) scss
-> 필자는 이렇게 사용을 했는데 , 여기서 느낀점이 공통으로 적용되는 스타일을 어떻게 할지 조금더 신경쓸 필요가 있다고 생각했다.
@mixin해서 ButtonCommon 이라는 공통 스타일을 만들었지만,
@include 된 스타일에서 color 값이 겹치는 모습을 볼수 있다.
버튼 클래스의 색상만 달라서 color 값을 다르게 해주었더니 , 적용되는 것을 보고
위와 같이 스타일을 작성하였다.
하지만.. 내가 봤을땐 왜 color 가 겹치는지 알수 있지만,
남이 봤을때는 헷갈릴수 있는 부분이다보니, 나중에는 조금더 세밀하게 신경써서 코드를 적어야겠다.
🎈 SCSS 설치 & 컴파일 방법
Sass(SCSS) 코드 자체로는 웹에서 돌아가지 않는다.
웹에서는 css만 동작하기 때문에 Sass를 컴파일 해주어야 한다.
컴파일의 방법은 다음과 같이 다양하다.
1) SassMeister 사이트
https://www.sassmeister.com/
-> 따로 프로그램을 설치하는 것이 아닌 온라인에서 scss 컴파일을 적용시킬 수 있는 방법으로, Sass 버전 설정도 다양하게 할 수 있으며, 실시간 변환을 확인 할 수 있다.
2) node-sass
노드 터미널에서 scss 파일을 css로 컴파일 할 수 있다.
-
node.js 설치한다.
-> 설치 후 Command Prompt 창에 다음과 같은 명령어를 넣으면, node.js 와 npm 이 설치되어있는지 확인할 수 있다.node -v
npm -v
npm list -g -
node-sass 를 설치한다.
-> 그리고 창에 아래 명령어를 입력하면 node-sass 모듈이 설치된다.
여기서 -g 는 global 설치를 말한다. 어느 폴더에서도 SASS 가 작동되게 설치를 하려면 -g를 붙여줘야 한다.npm install -g node-sass
node-sass -v # 만일 오류발생 시, npm rebuild node-sass를 쳐보자 -
터미널에서 컴파일 명령어를 입력한다
node-sass [옵션] <인풋파일> <아웃풋파일>
node-sass -w scss/style.scss css/style.css --output-style compressed
옵션으로 --watch or -w 를 입력해주면 파일을 감시하여 저장시 자동으로 변경 사항을 컴파일 한다
node-sass --watch styles/common.scss styles/common.css
3) VS Code 익스텐션 (Live Sass Compiler)
-> vscode에서 scss를 코딩하는데 도움이 되는 다음 확장 플러그인 들을 설치해준다.
1.https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
2.https://marketplace.visualstudio.com/items?itemName=adamwalzer.scss-lint
3. https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter
4. https://marketplace.visualstudio.com/items?itemName=Miladfathy.scss-snippet
5. https://marketplace.visualstudio.com/items?itemName=ffpetrovic.scss-scope-helper
🎈 .map 파일이란?
scss를 컴파일 해보면 다음과 같이 .map 이라는 파일이 생긴걸 볼 수 있다.
.map 파일은 개발하는데 있어 굉장히 중요한 파일 이다. 말그대로 scss 와 css를 매핑 시켜주는 역할을 하는 파일이다.
아무리 뛰어난 전처리기 언어라고 해도, 기본적으로 css와 문법 스타일이 다르다.
보통 웹브라우저 개발자도구를 켜놓고 하나하나 미세한 수정을 할 텐데, 웹브라우저는 css밖에 모르니 통합된 css 파일을 보고 scss를 일일히 찾아가며 수정해줘야 되지만, 매핑이된 .map 파일이 있다면, 브라우저에 아예 scss 파일 선택자를 띄워준다.
인용 출처: https://inpa.tistory.com/
이렇게 scss 에 대해서 공부했던 내용들을 정리 하였다.
scss를 사용해 보기 전까지는 막연하게 어떻게 쓸지만 생각하 였는데
적용해 보고 나니 scss 의 매력에 대해 알게 된것 같았다.
아직 scss의 다양한 문법들을 다 써보지는 못했지만 이 계기로 scss에 대해 한발자국 더 나간느낌이다.
다음은 내가 scss를 쓰면서 느꼈던 장점이다.😊
- css와 비슷한 문법으로 구조화 시킬수 있다.
- 가독성과 재사용성이 높아졌다. 따라 유지보수도 쉽게 된다.
- 다양한 문법들이 존재한다.
- 변수를 사용해서 중복된 css 값을 관리할수 있다.
앞으로 진행되는 프로젝트에서도 scss를 사용하게 된다면, 다양한 문법을 적용시켜 써봐야겠다!
