react - SCSS

자 이제 SCSS가 무엇이냐 하면

CSS를 프로그래밍 언어스럽게 작성가능하게 만드는 친구임

CSS에서 변수, 연산자, 함수 등등 요런 아이들을 사용할 수 있게 해주는 친구란다.

근데 또 이걸 쓰려니깐 브라우저는 SCSS 문법을 모른다.  CSS 문법을 알고 있을뿐

그래서 SCSS로 짜놓은 것을 CSS로 컴파일 해주는 친구가 필요함.

고로 터미널에 npm install node-scss ㄱㄱ   이 친구가 그 친구임.

 

사용법은 아주 간단하다.

 Detail.js 파일에 대한 SCSS 파일을 만들었다.

만들었쥬 ?

 

import 해주세유

위 사진처럼 기본적인 셋팅을 하고나서 본격적으로 문법을 배워보자.

 

 

---

첫번째

SCSS에서는 변수에 데이터를 저장해서 쓸 수 있다.

 

내가 자주 사용할 색상이 있다면....?

'$'이 친구 뒤에 변수 : 원하는 데이터    이런식으로 쓰면 됨

위에 사진에서는 '#ff0000'이라는 색상을 자주 쓸것 같아서  '이것은사스문법' 이라는 변수에 저장한 것이다.

그 후에는 class명이던 태그명이던 쓰고싶은 곳에 $변수명 으로 박아버리면 된다.

 

---

두번째

@import

 

CSS를 처박다보면 고수들은 'reset' 이라는 친구를 만들어 놓는다고 한다.

모든페이지 CSS에 박아놓을만 한 친구들, 즉 매번 쓸 친구들을 모듈화 해서 따로 저장해둔다고 생각하면 될것같다.

 

예를들면 body { margin:0; } 이라던지 div { box-sizing : border-box; } 등을  _reset.scss 로 따로 빼두고

이런식으로 다른 .scss 에다가 import 해오면 되는거다. 

그럼 적용된거임.

 

---

세번째

셀렉터 대신 nesting!

 

아래 사진 처럼

div.container 안에 h4태그도 속성을 주고싶고 p태그도 속성을 주고싶단 말이다.

그럼 이렇게 써야하는데 맘에     안들기 마련이다.

짜잔

{ } 속에 { } 로 요로코롬 이쁘게 속성을 줄 수 있다.

보기에도 조금 더 직관적이다. 
 ( h4와 p 모두 div.container와 관련 있구나 ~  div.container의 h4는 blue고 p는 green이구나 ~  하고 말이다.  )

 

---

네번째

@extend

 

내가 만약 아래 사진처럼 className 에다가  요런 속성들을 줬다고 하자.

그런데 여기서

새로운 알람창을 하나 더 만들고 싶고 또

알람창의 배경색만 노란색으로 바꾸고 싶다고 하자.

이렇게 하나 복붙 하면 되지 않을까요 ? 한다면 당신은 하수...

 

이럴때 @extend 를 사용한다.

이렇게 쓰면 무슨 의미냐~ 하면

my-alert 에 있는 모든 속성을 전부 붙여넣기 주세요~ 라는 뜻

거기에 배경색만 바꾼것이다.

 

CSS를 미리 만들어두고 그에 맞게 본문에 className만 바꿔가며 사용하면 될듯 하다.

※  className은 직관적인게 좋다. 

   사진에선 1,2 이런식으로 이름을 붙였지만  
   my-alert-red , my-alert-yellow 이런식으로 짓는게 좋음.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

한 가지 나중에 알게 된 것이 있는데,

@extend를 사용하면

해당되는 이름으로 적용된 모든 속성을 땡겨오는 듯 하다.

 

예를들어

저~ 밑에 만들었던 my-alert p

 .my-alert2 에 

@extend .my-alert ;  만 했는데도 

.my-alert p 에 적용된 속성까지 적용되더라.

 

---

다섯번째

@mixin / @include

 

이건 쉽게 말하면 함수를 만드는거다.

 

요로코롬 기본틀 이라는 함수를 만들었다고 생각해보세유.

맨날 쓸것 같아서 저장해뒀다고 하네요?

 

자자 그럼 어떻게 쓰냐.

 

쏘 이지

@include 함수명() ;    이렇게 쓰면된다.

 

이렇게 쓰면 기본틀에 있는 속성이 my-alert에 쭈욱 들어가는 것이요.

 

@mixin 이랑 @include  짝궁임 ㅇㅇ

 

 

끝