React Project9. 아니면 CSS대신 SASS를 쓰자 (SASS 문법 10분 총정리)

Steve·2021년 5월 25일

CSS가 너무 길어진다면

CSS를 약간 프로그래밍 언어스럽게 작성할 수 있는 SASS라는 preprocessor 를 이용하시면 됩니다.

SASS에선 변수, 함수, 반복문, 연산자 이런게 사용가능해서

브라우저는 sass문법 모름.
작성한 sass를 css로 컴파일해야되는데 node-sass 라이브러리가 알아서 다 해줌
SASS 문법으로 쉽게쉽게 짧게짧게 CSS를 작성할 수 있습니다.

상요방법:
SASS문법으로 작성하고 싶으시면 그냥 파일명만 .scss로 바꿔주시면 끝입니다.

(Detail.scss 파일)
.red {
  color : red;
}

(Detail.js 파일)
import './Detail.scss';

SASS문법을 쓰는 이유

SASS 문법 1. 변수 사용

scss파일에선 변수를 사용할 수 있습니다. 이렇게 사용합니다.

 (Detail.scss)

$메인칼라 : #ff0000;

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

$변수명 : 집어넣을값;

이렇게 변수를 만들고 원하는 곳에서 사용가능합니다.

색상 뿐만 아니라 px값 %값도 넣을수있다.
*참고) 한글 변수명도 가능.

SASS 문법 2. @import

실은 그냥 CSS문법이긴 한데 많이 쓰니 넣어두겠습니다.

CSS 파일 간 import를 하실 수 있는 문법인데

@import './어쩌구.css';
이렇게 사용하면 끝입니다.

보통 CSS 아키텍쳐 이런거 잘하는 분들이 자주 하는데

평소에 CSS 파일 짜다보면 자주 사용하는 스타일들이 간혹 있습니다. 예를 들면..

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

이런 스타일들입니다. reset 이라고 보통 부르죠.

이런걸 다른 css (혹은 scss)파일에 저장해두고 필요해질 때마다 @import 해오면 편리

앱의 메인 CSS 파일에 넣어도 됨.

SASS 문법 3. nesting 문법

CSS 짜다보면 셀렉터를 길게 복잡하게 알아보기 힘들게 쓰는 경우 있다.

scss파일 안에선 셀렉터 말고 이런 식으로도 개발이 가능합니다.

div.container h4 {
  color : blue;
}
div.container p {
  color : green;
}
▲ 이렇게 말고

 

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

▲ 이렇게 작성할 수 있다.

안쪽으로 작성함으로써 어떤 태그안에 어떤게 있구나 직관적으로 알기 쉬움.
둥지 안의 둥지 같은 느낌? 이래서 Nesting.

h4 {} 이렇게 안쪽에 쓰면 띄어쓰기 셀렉터랑 같은 뜻

✅ 이렇게 쓰는 이유?

셀렉터 해석이 쉽고
관련된 class끼리 뭉텅이로 관리하기 편리

SASS 문법 4. extends 문법

그 전에 간단한 알림창 UI를 디자인🔽

(Detail.scss 파일)

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert p {
  margin-bottom : 0;
}
(Detail.js 파일)

function Detail(){
  return (
    <div>
      <HTML많은곳/>
      <div className="my-alert">
        <p>재고가 얼마 남지 않았습니다</p>
      </div>
    </div>
  )
}

Q. 근데 갑자기 빨간색, 파란색 등 다양한 배경색의 알림창이 또 필요해지면?

손수복붙하지 않고 아래처럼 @extend 문법을 이용합니다.


(Detail.scss 파일)

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert2 {
  @extend .my-alert;
  background : yellow;
}

.my-alert p {
  margin-bottom : 0;
}

@extend 어쩌구

이렇게 그 자리에 복붙해줍니다.

CSS코드를 재사용할 일이 있을 때 손수 복붙없어 비슷한 UI 만들기도 용이함

SASS 문법 5. @mixin / @include 문법

mixin은 그냥 함수만드는 문법
함수문법은 코드 축약하고 재사용할 때 많이 쓰이는건 이미 알고 있다

SASS에선 function 키워드 대신 @mixin 이라고 쓴다.

중괄호 안에 내가 축약하고 싶은 코드들을 다 담으면 된다.

그리고 함수를 부를 땐 @include 함수명() 이렇게 불러준다.

(Detail.scss 파일)
// 함수 설정하고 아래처럼 이용

@mixin 함수() {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert {
  @include 함수()
}

.my-alert p {
  margin-bottom : 0;
}