원래는 깃허브에 짜잔 올려서 블로그에 같이 올릴 생각이었는데, 어라?
VScode상에서는parcel을 이용해서 잘 되던 게 깃허브에 푸쉬 해 놓으니 경로를 잘 못 읽어들인다. 🙄..
(요즘엔 개념 이해보다도 실습 환경 구축이 제일 어려운 것 같다...)
일단 실제 페이지 첨부는 이걸 해결하고 다시 업로드 하기로 하고 후기 먼저 작성한다.
2020.08.26 추가 SCSS 컴파일 프로그램을 이용하는 방법을 찾아서 하단에 관련 내용을 작성했다. 실제 링크는 아래에
BEM + SCSS = 😙
일단 이번 작업은 디자인은 내가 기존에 작업한 사이트 메인 화면을 BEM과 SCSS로 새로 제작하는 것이었다. 일단 갓 배운 걸로 뭔가를 새로 만들려고 하니 좀더 허들을 낮추기 위해 기존 작업물을 이용했다. 스타일을 다 만들어 두었으니 그걸 SCSS문법에 맞게 하나씩 긁어다 붙이면 되겠지 싶어 금방 쉽게 쉽게 끝날 줄 알았더니만, 생각보다 오래 걸렸다.
연습 목표
- 재사용할 부분을 생각해서 클래스 이름 정하기
- SCSS 기본 기능 사용하기
- 변수 기능 (전역변수 및 매개변수)
- @mixin @include 기능 사용
- scss 기본 함수 Opacify / Transpertilize
- 연산기능
- 문자보간
어려웠던 점
- 기본 형태
- $ : 변수 / & : 상위 요소 참조 / # 문자보간#{$변수}
- 함수 사용 형태
구문 등이 아직 어색해서 작성하는 데 좀 오래 걸리긴 했지만, 제공하는 기능이 획기적으로 편리하다는 인상을 받았다. 일단 익숙해지면 정말 좋을 것 같다. 이번 작업에서는 변수나 믹스인을 제작 하기는 했지만 사실 사용 방법이 확실치 않아 가장 간단한 기능들을 이용한 것에 불과했던 것이 조금 아쉽다. 더 영리한 방법이 있지 않을까? 계속 사용하면서 손에 익게끔 해야겠다.
소감
BEM은 사실 클래스 명이 너무 길어서 복잡하다고 생각했는데, SCSS와 같이 사용하니 훨씬 더 간단하고, 중첩을 사용했을 때보다 더 보기 쉬웠다. 반대로 SCSS 또한 BEM으로 클래스 이름을 작성했기 때문에 더 간편한 것 같아 이 둘이 서로 상보적인 관계에 있는 게 아닌가 하는 생각을 했다.
만약 BEM이 아닌 일반 CSS를 SCSS로 작성한다고 했어도 이만큼 간단하지는 않았을 것 같다. 거기다 나는 무조건 중첩되는 클래스를 쭈욱 적어놓는 버릇이 있었기 때문에 아마 어디부터 어디까지 누구의 중첩이고 그 중첩에서 언제 빠져나와야 할 지 갈피를 못잡았을텐데 명시적으로 잘 정리된 클래스 이름을 이용하니 효율이 굉장히 좋다고 생각했다.
SCSS 컴파일러 코알라
코알라는 sass컴파일러로, 오토 컴파일을 체크해놓으면 scss파일을 수정할 때마다 코알라 프로그램이 수정사항을 바로 인식하고 컴파일 하여 반영해준다.
html에는 컴파일 된 CSS 파일을 연결해두면 따로 신경쓸 것 없이 SCSS 사용이 가능!
