<ReactJs>컴포넌트 스타일링하기 (SASS,버튼스타일링)

SASS 는 Syntactically awesome stylesheets의 약자로서 리액트에서 뿐만 아니라 다른 웹프론트엔드 프로젝트에서도 자주 사용되는 기술이다. 

아래 링크에서 더 자세하게 정보를 얻을 수 있을것이다.

   https://sass-guidelin.es/ko/  

 

SASS는 CSS preprocessor(전처리기) 로써 사용하면 좋은 점들

1. 복잡한 작업을 보다 쉽게 해줄 수 있다.

2. 스타일 코드의 재사용성을 높여준다.

3. 코드의 가독성도 높아진다 (유지보수에 편하다)

 

SASS를 사용할 때는 2개의 확장자를 사용할 수 있다. (.scss /  .sass) 

간단하게 코드의 차이점을 알아보자

 

 

.sass  확장자

nav
    ul 
    	margin:0
        padding:0
    li
    	list-style:none

 

.scss 확장자

 

nav {
    ul{
    	margin:0;
        padding:0;
    }
    li{
    	list-style:none;
    }
}

 

둘의 차이점은 중괄호, ';' 의 유무라고 볼수 있다.

들여쓰기 만으로는 가독성과 코드의 구분이 헷갈릴 수 있기 때문에 scss 확장자 형식의 코드를 더 선호한다.

 

이 둘의 차이점을 더 자세히 알고 싶으면 아래 링크를 참고하면 되겠다.

                                         https://sass-lang.com/guide

 

 

그럼 이제 간단하게 버튼에 스타일을 입히는 작업을 해보겠다.

Button을 꾸밀 .scss 파일을 하나 만들어 준뒤 클래스명에 맞게 스타일링을 해준다.

 

 

$blue 는 변수로서 blue 색깔을 담아준 것이다. 

lighten() 함수와 darken() 함수는 각각 더 밝게, 더 어둡게 색을 변경해주는 함수다.

&: 는 자기자신에 대해 스타일링을 추가해주는 것이다.

 

그뒤에 Button 컴포넌트를 호출해주면

 

 

 

 

정상적으로 스타일링이 들어간 것을 확인 할 수가 있겠다~~!

 

간단 정리

 

** 본인이 꾸밀 컴포넌트에 해당하는 .scss 파일 생성 및 스타일링

** 컴포넌트 파일에서 스타일링한 .scss 파일 임포트

** 컴포넌트 호출

 

 끝!!