[React] 스타일링 SASS & SCSS

React의 스타일링 방법들 중에서는

SASS, styled components, tailwindcss 기술등이 있다

여기선 SASS 방법을 배울거다!

 

SASS?

Syntactically Awecome Style Sheets

문법적으로 짱멋진 스타일 시트

 

기존 CSS 단점을 보완하고 효율성을 높이기 위해 만들어진 문법이다

css 코드 중첩, 변수화, 속성 재사용 등 여러가지 기능을 제공해서

코드를 좀 더 효율적으로 작성할 수 있다

 

 

SCSS?

Sassy CSS

깔쌈한 CSS

 

SASS와는 실질적으로 같은 기술이다

 sass 3버전에서 등장한 

이전보다 호환성,가독성부분에 있어 개선된 버전이다

 

SCSS, SASS 분리한 이유 

그 차이는 코드 구분 방법이다

// SCSS 중괄호 구분
.button {
    background: white;
    border-radius: 5px;
    padding: 10px 20px;
}

// SASS 들여쓰기 구분
.button
    background: white
    border-radius: 5px
    padding: 10px 20px

 

SCSS는 기존 css 구분 방법과 비슷해서

React개발자같은 자바스크립트 기반으로 개발하는 개발자들이 SCSS를 선호하고

Python같은 들여쓰기로 구분하는 프로그래밍 개발자들은 SASS를 선호한다고 한다

즉, 가독성의 차이일 뿐이다

 

설치방법 

npm install sass

설치는 sass로 설치하고

확장자를 .sass 또는 .scss로 선택하여 사용할 수 있다

 

 

 

SCSS 변수

// style.scss
$min-size: 10px;
$max-size: 600px;

body {
    max-width: 500px;
    min-width: 100px;
}

.text-box {
    max-height: $max-size;
    min-height: $min-size;
}

 

JS기반으로 변수선언할 때 처럼 CSS에서도 변수선언을 할 수 있다

JS에서는 const maxNumber = 0 식으로 선언했다면

CSS에서는 $maxWidht: 500 식으로 선언 할 수 있다

 

호출할 때엔 기호($)까지 붙여 호출하면 된다

 

중복되는 코드를 간결하게 묶어줌으로써

이 코드를 알고 있는 개발자도 쉽게 알아볼 수 있고

모르는 개발자까지 쉽게 알아볼 수 있는 등 가독성면으로 매우 좋아

유지보수에도 수월하다

 

그래서 중복되는 색코드나 숫자, 문자열 등을 변수 하나에 묶어 이름을 지정해

쉽게 코드의 호율과 가독성을 챙길 수 있다

 

// 사람 디자인 style.scss
// scss 예시
$skin-color: '#F4C2AB';
$mans-height: 175;
#womans-height: 163;
$student-hair-color: 'black';

#student {
    color: $student-hair-color !important;
}

#man {
    background: $skin-color;
    color: rgb(20,20,116);
    height: $mans-height;
}

#woman {
    background: $skin-color;
    color: '#FFB8D8';
    height: $woman-height;
}

 

 

 

SCSS 중첩

// html
<li>
    <p>안녕하세요</p>
    <button>인사</button>
</li>

// 기존 CSS 구조 방식
li {
    color: black;
}

li > p {
    color: blue;
}

li > button {
    border: none;
}

 

기존 CSS에서는 <li> 안에 <p>와 <button>을 선택하기 위해서

<li> 요소를 두 번 더 불러오게 된다. 때문에 중복된 <li>만 3개가 되는거다

이것을 방지하기 위해 SASS에서는 중첩이라는 기술이 있다

 

// SCSS 구조 방식
li {
    color: black;
    
    p {
        color: blue;
    }
    
    button {
        border: none;
    }
}

 

객체 안에 아이템을 넣듯이

<li> 안에 <p>와 <button>을 넣어 코드를 간결화할 수 있다

또한 자기 자신을 선택해 설정하는 것도 가능하다

li {
    &:hover {
        color: red;
    }
}

 

 

 

SCSS 믹스인

반복되는 코드를 재사용할 수 있게 해주는 틀

틀 만들기	틀 사용하기
@mixin 믹스인이름 { 재사용할 코드 }	@include 믹스인이름;

 

 

element1 { display: flex; flex-direction: column; align-items: center; }

element2 { display: flex; flex-direction: column; align-items: center; }

element3 { display: flex; flex-direction: column; align-items: center; }

위처럼 3가지의 요소 안에

같은 속성 같은 값으로 완벽한 중복을 확인할 수 있는데

이런 불필요한 중복 코드를 css 믹스인을 통해 정리할 수 있다

@mixin flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

element1 {
    @include flex-column;
}

element2 {
    @include flex-column;
}

element3 {
    @include flex-column;
}

 

믹스인 틀을 만들 땐 @mixin 이름 {코드} 로 선언 후

요소 안에 @include 이름;을 해서 함수 다루듯 호출할 수 있다

 

element1 { display: flex; flex-direction: column; align-items: center; }

element1 { display: flex; flex-direction: row-reverse; align-items: flex-start; }

element1 { display: flex; flex-direction: row; align-items: stretch; }

하지만 같은 속성에 각각 다른 값이면?

믹스인에는 인자또한 넣어서 사용할 수 있다

때문에 값만 다를 경우 인자로 받아와 적용시킬 수 있게 된다

@mixin flex($direction, $align) {
    display: flex;
    flex-direction: $direction;
    align-items: $align;
}

element1 {
    @include flex(column, center);
}

element2 {
    @include flex(row-reverse, flex-start);
}

element3 {
    @include flex(row, stretch);
}

 

함수에서 인자를 받듯이 하면 된다