[React] 7. SASS

SASS - 프로그래밍 언어스럽게 스타일링 할 수있는 라이브러리
변수, 함수, 반복문, 연산자가 사용 가능하단다

우선 또 라이브러리 설치 ㄱㄱ
yarn add node-sass

설치 완료가 완료되어서 src폴더에 Detail.js를 스타일링 하기위한 Detail.scss 파일 생성
(오 아이콘 간지)

브라우저는 sass문법을 모르기 때문에 내가 작성한 sass를 css문법으로 컴파일해서 브라우저에게 전달한단다

SASS 문법
1. 변수에 데이터 저장 가능

/*Detail.scss*/
$mainColor:#ff0000;

.red{
    color : $mainColor;
}

자주 쓰는 색상이나 속성이 있다면 변수처럼 저장해서 사용이 가능하다!!

2. @import 문법

css를 짜다보면 자주 사용하는 스타일들이 존재한다

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

보통 css reset이라고 부름
이런 자주 쓰는 속성들을 다른 파일에 저장한뒤 불러오기가 가능하다

/*reset.scss*/
body {
    margin : 0;
    color:red;
  } 
  div {
    box-sizing : border-box;
  }

src폴더에 자주 쓰게될 reset.scss를 하나 만들었다

/*Detail.scss*/
@import './reset.scss';

$mainColor:#ff0000;

.red{
    color : $mainColor;
}

import해서 사용하기만 하면 끝!!!
실제로 reset.scss의 속성들이 Detail.scss에 잘 적용 되었다ㅎㅎ

3. nesting 문법

css를 짜다보면 셀렉터를 길고 복잡하게 써야하는 경우가 있다

div.container h4 {
    color : blue;
  }
div.container p {
    color : green;
}

이런 경우를 한번에 해결 가능

div.container {
    h4{
        color:blue;
    }
    p{
        color:green;
    }
}

실제로 잘 적용이 된다ㅎㅎ

4. @extend 문법

먼저 알림창하나를 만들어 주었다

똑같은 창을 하나 더 복붙하고 싶다면 @extend 문법을 쓰면 된다

/*Detail.scss*/
.myAlert{
    background: #eeeeee;
    padding: 15px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin:auto;
}
.myAlert-2{
    @extend .myAlert;
    max-width: 150px;
    margin-top: 10px;
    background:orange;
}

@extend 문법을 통해 myAlert의 속성을 복붙해주었고 바꿔주고 싶은 속성만 다시 적어주면 된다.
그리고 원하는 곳에 className을 myAlert-2로 주기만 하면 끝!!

잘 적용이 되었다ㅎㅎ

@mixin/@include 문법

간단하게 함수를 만들어주는 문법이다

@mixin alertFunc() {
    background: #eeeeee;
    padding: 15px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin:auto;
}

.myAlert{
    @include alertFunc();
}

함수를 선언하려면 @mixin,
함수를 사용하고 싶은곳에서 @include 해서 쓰면 된다

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)