Sass사용 오류 & Sass를 CSS로 바꾸기

리액트를 공부하면서 많은 예제들을 접해서 코드를 작성하는 중에 Sass를 사용하는 예제들을 많이 맞닥드렸다.

CSS와 다르게 중복되지 않게 재활용성을 높여주고, 코드의 가독성을 높여준다는 혹하는 매력과는 달리 나는 엄청난 오류폭탄을 맞이했다.😥

 

오늘 이 포스트의 순서는 

• SCSS사용하면서 발생했던 오류
• SCSS 코드 => CSS코드

---

🤯SCSS 실행 오류

node sass version 5.0.0 is incompatible with ^4.0.0.

터미널에 계속해서 나타난 오류

scss코드를 작성한 후, 실행을 하면 이런 오류가 나타났다.

node sass의 버전이 안맞는다는 것 아닌가,,, 그래서 바로 구글링을 해봤다.

stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0 

역시...스택오버플로우... 나만 이런 오류가 나는 건 아니구나...하는 위로를 받고 스택오버플로우에서 사람들이 제시해준 대로 해보았다.

//터미널에서
$npm uninstall node-sass
//sass를 지워주고
//버젼이 4.14.1로 호환이 될 수 있도록 다시 설치해주는 방법이다.
$npm install node-sass@4.14.1

위의 명령어를 사용해서 기존에 설치한 node-sass을 제거하고, 호환이 되는 버전으로 설치해주는 방법이다.

이제 되겠지...? 라는 나의 부푼 기대와는 달리, 제대로 지워지지도 않고, 제대로 설치가 되지도 않았다.

 

계속해서

File to import not found or unreadable

이러한 오류만 또 터미널에서 반복되며 제거랑 설치가 끊겼다.

stackoverrun.com/ko/q/12783682  

이 링크에서 나와 비슷한 오류로 올린 글을 볼 수 있는데, path랑 파일의 이름을 제대로 확인하라는 말밖에 없었다.

하지만, 나는 아무리 봐도 이름도 path도 제대로 한 것 같아 더 이상 어떻게 해결해야되나 해서 멘붕이 왔었다.

 

그렇게 허무하게 하루를 날리고, 다음날이 돼서 찾아보니 어떤 분은 node js 자체를 제거했다가 다시 설치를 했다고 하는 글을 보게 됐다.

velog.io/@qqbck123/sass%EC%84%A4%EC%B9%98%EC%A4%91-%EC%98%A4%EB%A5%98 

이 글인데 제발 이젠 해결돼라...라는 마음으로 node도 재설치해봤다.

결과는....

소용없었다....

욕이 나오는 상황이었지만, 어쩔 수 없으니 css로 작성하자라는 마음으로 노선을 틀었다.

😭만약, 나와 똑같은 오류가 났던 분들은 이 세 방법 중 하나로라도 꼭 해결됐으면 좋겠다.😭

 

 

&+& 를 CSS로 고치기

그렇게 위에서의 험난한 여정 끝에 CSS를 다시 작성하기 시작했다.

scss와 css는 비슷한듯 다르다. 이게 너무 헷갈렸다!!!!!

아무래도 scss의 코드를 가지고 css로 고치다보니 코드가 많이 지저분해진 것 같다.

그러다가 scss의 예시 코드에서 이러한 부분을 보게 되었다. 

.TodoListItem{
	(...)
    //생략
    
    &+&{
    	border-top: 1px solid #dee2e6;
    }
}

 

.TodoListItem 안에 들어있는 함수 &+& 가 있다.

저 부분은 엘리먼트 사이사이에 테두리를 #dee2e6의 색으로 넣어준다는 뜻이다.

만약 &+&가 .text와 같은 것이었으면 css로는 .TodoListItem .text {}이렇게 표현해주면 된다.

&는 placeholder for the parent selector라고 한다.

부모 선택자를 위한 표시라고 할 수 있다.

따라서. 저 코드에서는 부모인 .TodoListItem을 뜻하는 것이다.

그렇기 때문에, 위의 코드를 css로 바꾸게 된다면 아래와 같이 바꿀 수 있다.

 

.TodoListItem + .TodoListItem {
    border-top: 1px solid #f1f3f5;
}

 

이렇게 공부하다보니 css에 대해서 재미와 모르는 게 아직 너무나도 많다고 느꼈다.

다음에는 css에 대해서 더 공부해서 정리해봐야겠다는 생각을 했다.