[Sass]Sass 기본 문법 정리

Sass 기본 문법 정리

1) 변수에 데이터 저장해서 사용하기

$변수명 : 변수에 넣을 값;

$mainColor : #ff0000;

.red {
    color: $mainColor;
}

 

2) 파일 import 하기

@import '파일 경로';

\- 주로 모든 페이지에 필요한 CSS reset을 파일을 새로 생성하여 작성하고 import

//src/reset.scss 
body {
    margin: 0;
}

div {
    box-sizing: border-box;
}

\- Detail.scss에 reset.scss 파일을 import 합니다.

@import './reset.scss';

 

3) Nesting

- 셀렉터 대신 사용 가능

// Selector
div.container h4 {
    color: blue;
}

div.container p {
    color: green;
}

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

 

4) Extend

@extend #아이디명; OR @extend .클래스명;

- 우선 Detail.js에서 간단하게 alert를 만들겠습니다.

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

 

\- Detail.scss에 my-alert에 대한 css 코드를 작성하겠습니다.

.my-alert {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    p {
        margin-bottom: 0;
    }
}

 

\- 다른 색상의 alert UI가 필요하다면?

: 이런식으로 코드를 복사 붙여넣기 하면 코드 수가 길어지고 가독성도 떨어집니다.

.my-alert {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    p {
        margin-bottom: 0;
    }
}

.my-alert-red {
    background: red;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    p {
        margin-bottom: 0;
    }
}

 

\- 아래와 같이 my-alert를 extend하여 사용

.my-alert {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    p {
        margin-bottom: 0;
    }
}

.my-alert-red {
    @extend .my-alert;
    background: #fa8072;
}

\- Detail.js에서 <div>의 클래스명을 'my-alert-red'로 적용하면 다음과 같이 스타일이 적용된 것을 확인.

 

 

5) @mixin / @include

@mixin 함수명() {} / @include 함수명();

\- SASS에 함수를 사용하고 싶을 때 @mixin으로 선언하고, @include로 호출합니다.

@mixin func() {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    p {
        margin-bottom: 0;
    }
}

.my-alert {
    @include func();
}

 

Reference

https://dori-coding.tistory.com/entry/React-SASS-개념-설치-및-기본-문법?category=1038534