[React]SASS 기초 문법

[React]SASS 기초 문법

SASS란 css를 프로그래밍 언어스럽게 작성 가능한 프리프로세서(Preprocessor). css에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있게 만들어준다. 브라우저가 이러한 문법을 해석하기 위해서는 SASS라는 라이브러리를 사용하여 css 파일로 변환시켜줘야한다.

SASS 시작하기

SASS 설치하기

SASS 사용하기

1.sass 파일 생성

2.sass 파일 임포트

import './Detail.scss';

 

SASS 문법

1. 변수에 데이터 저장

Detail.sass

$메인칼라: #ff0000;

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

$변수명 : 값; 으로 자주 사용하는 스타일을 변수에 담아서 사용할 수 있다.

2. @import

sass 파일에 공통 스타일 파일을 임포트해서 사용할 수 있다.

Detail.sass

@import "./reset.scss";

_reset.sass

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

ul,
li {
  list-style: none;
}

div {
  box-sizing: border-box;
}

3. nesting

nesting은 셀렉터 대신에 사용할 수 있는 문법이다.

일반 css 스타일 넣은 경우

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

nesting 문법 도입한 경우

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

4. @extend

@extend .클래스명 으로 비슷한 UI 디자인할 때 해당 스타일을 그대로 가져와서 쓸 수 있다.

Detail.js

        <div className="my-alert-yellow">
            <p>재고가 얼마 남지 않았습니다.</p>
        </div>

Detail.sass

.my-alert {
  background-color: #eee;
  padding: 15px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  margin: auto;
}

.my-alert-yellow {
  @extend .my-alert;
  background-color: #ffe591;
}

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

 my-alert 클래스에 지정된 스타일을 my-alert-yellow라는 클래스에서도 사용한 것이다.

결과 화면

5. @mixin / @include

@mixin은 css에서 함수를 사용할 수 있는 문법이다.

@mixin 함수 {
  background-color: #eee;
  padding: 15px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  margin: auto;
}

.my-alert {
  @include 함수();
}

@mixin 함수명 으로 함수를 만들고 @include 함수명(); 으로 함수를 사용할 수 있다.