@import
하나의 CSS파일은 커지고 결국 유지하기 힘들어진다. 그래서 여러개의 파일로 클래스를 나누는 것들이 효과적이다. 그래서 하나의 중요한 파일만 import해올 수 있다.
@import '파일 이름';
@import url('url of the stylesheet')@import './buttons.scss';
@import url('https://example.com/css/breadcrumbs.scss');@use
변수 쓰기
CSS파일을 다른 파일로 import하는 건 실현가능한 방법이다. 그러나 Sass는 @import를 더이상 앞으로 쓰지 않을 것이라고 했다. Sass는 @use나 @import를 지원한다.
@use는 namespace로 사용되어진다. 예를 들면 buttons라는 다른 파일에서 primary-color라고 이름붙인 색깔 변수를 갖고 있다고 치자. 그러면 이 변수를 buttons파일이 아닌 다른 파일에서 쓰려면 아래와 같이 쓰면 된다.
@use '가져올 파일 이름';
//이런식으로 한다.
@use 'buttons';
.card {
color: buttons.$primary-color;
//color: 가져올파일이름.$내가만든변수이름
}
참고로 @use는 맨 위에 쓰도록 하자. 그래야지 밑에 작성한 코드들도 다 어디서 파일 가져온지 알겠지?(@import랑 비슷하게 생각하면 된다)
만약에 두가지 import된 파일이 있다고 치자. 그런데 이 파일 둘 다 이름만 같은, 다른 변수를 가지고 있다면?
그래서 아까 위의 코드에서 코드를 저렇게 친 것이다!
가져올파일이름.$내가만든변수이름
그래서 내가만든변수이름이 다른 파일에서 겹치더라도, 가져올파일이름을 정해줬기 때문에 문제가 생기지 않는다. @import에서 골머리 앓던 문제가 해결되었다.
VS Code에 있는 libSass 또는 node-sass는 @use,@forward 기능을 지원하지 않는다고 하니 Dart Sass를 설치하자
그런데 사실 매번 파일이름을 치기에는 너무 귀찮다... 알아보기도 힘들다. 그래서 간단하게 줄여서 쓸 수 있다.
@use 'buttons' as b;
.card {
color: b.$primary-color;
}as 뒤에 '내맘대로정한이름'을 붙이면 된다. 이제 내맘대로정한이름으로 부르면 된다~!!!
@forward
근데 @use를 쓰면 내가 그 파일을 쓰고 싶을 떄마다 @use를 작성해서 매번 불러와야 한다. 근데 그런 파일이 10개라면... 너무 반복적이라 비효율적이다. 그럴 때 쓸 수 있을 때 @forward이다. 얘는 그렇게 계속 여러군데서 쓰이는 파일들을 한데로 모아서, 다른데에 쓸 수 있다.
파일 하나에다가 데려다 오고 싶은애를 @forward로 모아주면 됨. 그다음에 쓰면 됨.
다른 클래스에서 스타일 상속받기
만약 다른 클래스나 아이디로 스타일을 상속받고 싶다면 @extend를 쓰면 된다. @use써서 어디서 가져올 건지 쓰면, @extend는 상속받고 싶은 애한테 맘대로 쓰면 됨
_LibSass (node-sass)
Sass를 쓰기 위해 Ruby가 꼭 필요한 건 아닙니다.
C/C++ 언어로 포팅된 LibSass도 있고, 이걸 node.js 환경에서 쓸 수 있게 만든 node-sass도 있습니다.
요 아이들은 기존 Ruby SASS보다 더 빠르게 컴파일할 수 있어요.
node.js가 설치되어 있다면 npm install -g node-sass로 시작할 수 있습니다.
Dart Sass
하지만 LibSass나 node-sass도 좀 옛날 꺼라서 공식 팀에서는 작별 준비를 하고 있습니다.
2020년부터 deprecated 되었습니다. (바이바이!)
지금은 Dart Sass란 걸 밀고 있어요. 이름을 보니 Dart 언어로 구현된 것 같습니다._
Dart Sass는 Ruby보다 빠르고 C++와 거의 비슷한 속도를 제공한다고 합니다.
그리고 몇 가지 장점을 소개하고 있긴 한데... 암튼 최신이니 좋은 게 좋은 거겠죠 😙
Dart Sass도 npm을 통해 설치할 수 있습니다.
@use나 @forward를 쓸 때 에러가 난다면
@use나 @forward를 쓸 때 자꾸 컴파일 오류가 나는 경우가 있습니다. dart-sass 대신 node-sass같은 걸로 쓰고 있었기 때문인데요.. 제가 dart-sass를 다시 설치한 줄 알았는데 아니었더라구요..ㅎㅎ..
https://www.npmjs.com/package/dart-sass 여기 방문해서 오른쪽에 있는 install부분 주목! 그대로 복사해서 터미널에 입력하시면 dart-sass가 잘 깔립니다.
음.. 이제 dart-sass를 sass로 이름 지었나봐요. 아예 다른 건줄,,, 알았습니다. 그리고 더이상 이 패키지(해당 링크dart-sass)를 권장하지 않는다고 하네요.
https://stackoverflow.com/questions/63943756/replace-node-sass-with-dart-sass-in-create-react-app-v3-x
다행히 스택오버플로우에서 해결책을 찾았습니다ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ흐엥
- 일단 node-sass 제거
yarn remove node-sass- sass 설치
yarn add sass
-
node_modules 등등 파일 삭제
지금 리액트 파일에서 node-modules 파일 삭제해줍니다. (저는 yarn.lock 혹은 package-lock.json 보이는거까지도 다 삭제했습니다.) -
node-modules 등등 파일 재설치
yarn install(그리고 지금은 sass를 쓰려면 nodejs 지우고 14버전 설치를 추천한다고 하네여-코딩애플)
그냥 간단하게 @import대신 @use쓰려구 한건데 하루종일 삽질해서 짱났어요ㅋㅋㅋㅋㅋㅋㅋ근데 항상 어찌저찌 열내면서 찾다보면 또 절대 해결안될 줄 알았던게 풀리더라구요. 해결돼서 다행이에요. sass이놈
출처 컴파일 오류에 관한 질문글, 댓글:
@use is only supported by dart-sass - if you are using lib-sass or ruby-sass, that may be why you're getting that error. I believe node-sass uses lib. Here's a github issue: github.com/sass/node-sass/issues/2886
https://stackoverflow.com/questions/66748497/node-sass-invalid-css
참고
https://www.youtube.com/watch?v=CR-a8upNjJ0&t=18s <-- 어떻게 쓰는지 쉽게 알려줌
https://www.geeksforgeeks.org/inherit-a-class-to-another-file-in-sass/
https://sass-lang.com/documentation/at-rules/use
https://blueshw.github.io/2019/10/27/scss-module-system/
https://www.youtube.com/watch?v=dOnYNEXv9BM
