[Sass] Sass의 정의와 특징

sass를 한번 쓰게 되면 다시는 css로 못돌아갈 만큼 편리한 sass에 대해서 알아보자!!

Sass설치

[설치] npm install sass

• 터미널에서 프로젝트 폴더로 이동한 뒤 위와 같은 명령어를 작성하면 설치가 가능하다.
• 설치가 완료되었다면, 아래처럼 package.json의 dependencies 항목에서 해당 패키지 명과 버전이 잘 추가되었는지 반드시 확인해준다.

Sass란?

• nesting으로 선택자를 복잡하게 만들지 않아도 된다.
• 반복적은 코드를 변수화하고 연산기능을 쓸 수 있다.
• sass는 sass문법으로 스타일 속성을 부여해주면 css변환해주는 css전처리기이다.
• sass의 문법이 먼저 나오고 개선된 문법이 scss이다.

Sass를 사용하는 이유는?

기존의 css파일에서 scss로 바꾸고 import를 하게 되면 스타일이 잘 적용되는 부분도 있지만, 다른 스타일이 적용되어 스타일이 깨지는 모습을 볼 수 있다.

이런 문제가 생기는 이유는 SPA와 연관되어 있다.

MPA환경에서는 각각의 페이지마다 css파일을 독립적으로 import해 사용하기 때문에 선택자가 해당 페이지에서만 중복되지 않으면 됐지만,
SPA 환경에서는 모든 페이지 컴포넌트가 Router.js로 모이고 index.js를 거쳐 index.html에 모이기 때문에 겹치는 선택자가 있다면, 스타일이 깨 질 수 밖에 없다.

위와 같은 문제를 해결하기 위한 방법으로는

• 모든 태그에 className 을 다르게 주기
• css의 자손결합자 를 사용하기

와 같은 두가지 방법이 있다.

className

• 컴포넌트가 많아지고 관리하는 태그들이 많아지면 나도 모르게 중복해서 사용하는 className이 있을 수 있기 때문에 유지보수를 하거나 에러를 고치는데 상당히 복잡해질 수 있는 문제점이 있다.

자손결합자

• 가장 최상위 부모 태그의 className에 컴포넌트 이름과 동일한 className을 부여하기
  • 각 컴포넌트에서 사용하는 className은 겹칠 수 있지만, 컴포넌트의 이름은 겹치면 안된다.
  • 따라서, 최상위 부모 태그의 className에 컴포넌트 이름을 부여하면, 각 컴포넌트끼리 겹치는 className이더라도 어떤 컴포넌트에서 사용하는 className이란 것을 명확하게 구분할 수 있게 된다.
• 하지만 사용할 때마다 매번 조상 선택자를 작성해 줘야 하기 때문에 적용해야 할 스타일이 많아지면 쓰기 불편 해 질 수 있다.
  • 이때, 해결 방법으로 sass의 nesting 기능이 있다.

nesting문법

• 컴포넌트 간 속성이 겹치지 않게 함
• JSX구조대로 부모 선택자가 자신 선택자를 감싸는 형태의 문법
• SPA의 특성상 className이 겹치더라도 속성이 중복 적용되지 않는다.

...
      <div className="login-wrap">
        <h1 className="logo">Westagram</h1>
        <form className="login-form">
          <div className="input-area">
            <input
              className="input-id"
              type="text"
              name="id"
              placeholder="전화번호, 사용자 이름 또는 이메일"
            />
            <input
              className="input-pw"
              type="password"
              name="password"
              placeholder="비밀번호"
            />
            <p className="notice">올바른 아이디와 비밀번호를 입력해주세요</p>
          </div>
          <button className="btn-login">로그인</button>
        </form>
      </div>

위와 같은 JSX 구조가 있다고 했을 때 nesting문법을 적용한 scss의 모습은 아래와 같을 수 있다.

.login-wrap {

    .logo {
        font-family: 'Lobster', cursive;
        font-size: 40px;
        margin-bottom: 40px;
    }

    .login-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 100px;

        .input-area {
            width: 90%;

            &.error {
                .notice {
                    display: block;
                }

                input {
                    border: 1px solid red;
                }
            }

            input {
                width: 100%;
                padding: 10px 10px;
                margin-bottom: 10px;
                background: #fafafa;
                border: 1px solid #dbdbdb;

                &::placeholder {
                    color: #999;
                }
            }

            .notice {
                display: none;
                margin-bottom: 15px;
                font-size: 12px;
                color: red;
            }
        }

}

• 위 코드를 보면 sass 의 nesting은 마치 HTML구조처럼 login-wrap로 자식 관계에 있는 스타일을 품고 그 안에 다른 태그 혹은 className들의 스타일을 적용하는 방법으로 구현된 것을 볼 수 있다.
• 위와 같이 스타일을 관리하게 되면, 스타일의 변경을 주고 싶거나 오류가 발생한 부분을 비교적 빠르게 찾을 수 있게 된다!

💡sass는 css전처리기이기 때문에 scss문법을 이용해 편리하게 작성한 scss파일을 실제 화면에 그릴 때는 컴퓨터가 읽을 수 있는 css파일로 자동으로 변환해준다!

변수

• 반복되는 값을 변수로 지정할 수 있다.
• scss 최상단에 변수를 선언해준다.

$primary-color: #0095f6;

.btn-login {
	width: 90%;
    padding: 8px 0;
    background: $primary-color;
    border: 1px solid $primary-color;
    color: #fff;
    font-weight: 500;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
}

& 선택자

• 엠퍼센드(&)
  • nesting 구조 내에서 부모 선택자로 쓰인다.
• :hover / :checked / :not / 가상요소
• className의 접속사로도 사용 가능하다.

.btn-login {
	width: 90%;
    padding: 8px 0;
    background: $primary-color;
    border: 1px solid $primary-color;
    color: #fff;
    font-weight: 500;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    
    &:disabled {
        opacity: 0.5;
    }
}

mixin

• 중복되는 속성이 여러 개가 있을 때 한번에 묶에서 사용할 수 있다.
• mixin은 @mixin 변수이름 {여러가지 스타일 속성} 과 같은 형식
• 만든 속성을 사용할 때는 사용하는 부분에 @include 변수 이름을 사용하면 된다.

// 선언
@mixin flexCenter{
	display:flex,
	justify-content: center;
    align-items: center;
}

//사용
.signiup{
	@include flexCenter;
}

optional arguments

• mixin과 함께 쓸 수 있으며 함수처럼 매개변수와 인자를 쓸 수 있다.
• 속성의 값은 레이아웃마다 다르게 적용될 때가 많은데 이런 경우 가변적으로 속성을 쓸 수 있다.
  • 스타일 속성의 틀은 유지할 채, 스타일 속성에 적용되는 값을 변경해서 적용시킬 수 있다.

// 선언
@mixin flex($justify, $align){
	display:flex,
	justify-content:$justify;
    align-items: $align;
}

//사용
.signiup{
	@include flex(center, center);
}

다른 파일에서 작성한 mixin을 가져다 쓰고 싶을 때

• 변수나 mixin만 들어 있는 scss파일을 만들어서 필요한 파일에 import해서 사용한다.

@import "../../styles/variables.scss";

마무리✨

문법이나 스타일 속성 사용하는 것은 css와 크게 다르지 않아서 css에 익숙하다면 scss를 사용도 문제 없을 것 같다. 하지만 mixin이나 변수로 설정하는 것과 같은 개념은 조금 낯설 수 있기 때문에 기존 css를 scss로 변환하면서 많이 사용해보면서 사용법에 익숙해져야 할 것 같다.
css 를 사용할 때 매번 내가 사용하던 색상코드를 까먹어서 위로 올라가서 다시 복붙해오고 이랬던 적이 많아서 은근 불편했었는데 앞으로 scss를 사용하면 좀 더 빠르고 편리하게 작업 할 수 있을 것 같다!!