쇼핑몰 프로젝트(SASS)

코딩애플 님의 강의를 바탕으로한 글입니다:)

SASS

설치
npm install node-sass 또는 yarn add node-sass

CSS는 원초적인 스타일링 언어이다. 그리고 이러한 CSS를 프로그래밍언어스럽게 하는 대체 문법이 존재하는데 이 것이 SASS라는 pre-processor이다. 이 것을 이용하면 변수, 반복문, 함수 같은 문법으로 CSS을 작성할 수 있다. 그리고 SASS 문법으로 스타일 한뒤 다시 CSS로 컴파일을 해야 한다.
이때 node-sass라는 라이브러리가 자동으로 변환해주기 때문에 설치하는 것.

1. Detail.js 에 대한 Detail.scss을 생성한다.
   이때 Detail.js에서는 import './Detail.scss'; 을 통해 파일을 받아온다.

2. $변수명
   만약 자주 쓰는 색상 또는 항상 선언하기 코드가 어려운 색상이 있을 것이다.
   따라서 변수로 설정해놓고 변수를 가져다 쓴다.

$메인칼라 : #ff0000;
.red {
  color : $메인칼라;
}

3. @import
   CSS 작성할때 알아두면 좋은 것인데, reset이라고 하여 시작할때 미리 세팅을 해놓고 들어가는 기본적인 코드들이 있다.

body {
  margin : 0;
} 
div {
  box-sizing : border-box;
}

이와 같은 reset 들을 모아놓은 reset.scss 파일이 있으면, 그 파일을 메인 scss에 불러오면 된다.
그 방법은 @import './reset.scss'; 로 작성하면 정상적으로 작동한다.

4. nesting
   일반적으로 하위 태그들을 사용할 때 아래와 같은 방법을 쓴다.
   
   하지만 이러한 셀렉터 대신 nesting을 하면 가독성도 좋고 편하다.
   nest는 둥지라는 말, nesting은 중첩이라는 말로 하나의 상위태그 안에 속한 태그들을 묶어주어 보기도 편하고, 중복되는 코드를 줄일 수 있다.
   

5. @extend
   만약 잘 만들어놓은 속성이 있는데, 그것과 같은 속성이 필요해서 복사 붙여넣기하고 싶은 경우가 있다. 똑같은 코드를 중복하게 되는 것이고 코드 또한 길어진다. 따라서 아래와 같은 코드를 통해 alert에 있는 속성을 그대로 가져다 쓰겠다라는 뜻이 된다.
   

6. @mixin / @include
   변수 가져다 쓰듯히 함수 선언하여 그 안에 코드를 가져다 쓸 수 있다.
   대신 @include를 앞에 붙여주는 것을 잊지마자.