Sass/SCSS 정의 / 설치 및 기초 문법

namYeJi9q·2023년 3월 23일

TIL

목록 보기

31/49

sass란?

SASS는 CSS로 컴파일된 스타일시트 언어로 CSS와 완전히 호환되며, CSS의 모든 기능을 지원한다. 변수, 중첩 규칙, 믹스인, 함수 등을 사용할 수 있다. Sass는 대규모 스타일시트를 잘 정리된 상태로 유지하고 프로젝트 내외에서 디자인을 쉽게 공유할 수 있도록 도와준다.

SASS는 Sassy CSS혹은 Syntactically Awesome Style Sheets의 약자로 CSS의 기능을 확장하고 효율적이고 유지보수가 쉬운 스타일 시트를 작성할 수 있도록 도와주는 프리프로세서(preprocessor:전처리기)이다.

<요약> SCSS란?

스타일시트 언어

CSS와 완전히 호환

CSS의 전처리기

CSS의 기능 확장 및 효율적이고 유지보수가 쉽게 도와준다.

sass를 이용하면 CSS를 효율적으로 모듈화를 시킬 수 있고, 여러가지 반복문, 조건문 같은 다양한 기능을 이용할 수 있어 편리하다.

아래는 기초적인 sass 기능이다.

Nesting
변수의 사용
Mixin
조건문과 반복문

sass 설치

sass를 설치하는 방법에는 루비sass, node 버전 sass, Dart 버전 sass설치를 할 수 있는데 가장 최신 버전의 Dart버전을 설치해 사용하겠다.

먼저 node.js를 설치해야한다.
설치 후 node -v로 잘 설치되었는지 확인 한다.
Dart 설치는 sudo npm install sass -g로 하면 된다.
mac이 아니라면 sudo는 떼고 붙여넣는다.
sass --version으로 설치되었는지 확인한다.

sudo npm install -g sass -> sass --version

dart 버전이 설치되었다.

이제 실제로 사용법을 익혀보자.

📍sass checkPoint

세미콜론을 사용하지 않는다

중괄호 대신 들여쓰기를 한다

주석은 2개가 있다.//한줄주석 , /* 여러줄 주석 */

sass 컴파일

터미널 창에 변환구문을 입력해주어야한다.

sass --watch sass/style.sass css/style.css

이렇게 입력해주면 없던 css 폴더가 나타난다.
sass에서 입력했던 명령으로 인해 변경된 것을 볼 수 있다.

중괄호가 없으니 오히려 가독성도 떨어지고 불편해서 중괄호는 포함한 문법으로 나온것이 scss이다.

sass와 똑같이 폴더를 만들고 그 안에 style.scss 파일을 만들어 준 다음 터미널로 변환구문을 입력해준다.

sass --watch scss/style.scss css/style.css

style.css.map 파일

이건 왜 있는 걸까.
우리가 scss파일에 아무렇게 입력하고 저장을 해도 css파일로 변환되면서 예쁘게 정렬이 된다.

브라우저는 css를 컴파일하기 때문에 이 코드에 해당하는 css를 찾거나 오류가 날 때 css파일 안에서 몇번째 줄인지 알려준다. 이 map이라는 파일은 scss에서 몇번재 줄 코드인지 알려주는 파일이다. 이 파일이 없으면 scss파일에서 몇번째 줄에 있는 코드인지, 오류가 몇 번째 줄에서 났는지 알기 어렵다.

네스팅(nesting)

html구조와 유사하게 css를 구성할 수 있다.

기존 css는 자식이 여럿이면 하나하나 .box.item1...이런식으로 나열을 해주어야 해서 불편하고 코드가 비효율적이였다면 네스팅은 html구조와 동일하게 css를 쓸 수 있다.

아래와 같이 css를 치고 이를 네스팅을 사용해 변경해보자.

네스팅의 장점은 직관적일 뿐 아니라 클래스의 이름을 바꾸더라도 css 한 줄만 수정하면 되어서 매우 편리하다.
css 입력할 때 p하나 h1하나 a하나 따로따로 부모이름부터 쭉 나열하는게 귀찮았는데 이런 쉬운 방법이 있다니! emotion도 네스팅이 되던데 css를 편리하게 쓸 수 있는 도구를 하나 더 알게 되어 매우 기쁘다!

hover시에 네스팅의 편리함이 돋보이는데
부모 요소 안에 &를 쓰면 부모요소를 받는다는 뜻이다. 예시로 보면

이렇게 요소 하나하나에 동일하게 들어가는 hover를 한번에 처리할 수도 있어 효율적이다.

sass의 변수

자주 바뀌는 글자색과 같은 것을 변수로 만들어 두고 사용하면 변수만 변경하여 적용된 요소를 변경할 수 있어 편리하다.

변수를 만드는 규칙
$ 를 쓰고 알아보기 편한 이름을 붙여준다. body의 background color를 변경하려 하면 $bgbody , 그리고 :#eee 라고 원하는 값을 입력하면 된다.
ex) $bgbody : #eee;

mixin

mixin이라는 기능은 자주 만드는 ui컴포넌트를 빠르게 만들 수 있게 패키징하는 기능, 자주 만드는 기능을 명령어 하나로 빠르게 적용할 수 있다.

@mixin 변수이름(){} 으로 변수를 만들고 이 변수를 부를 때는 @include 변수이름(); 으로 부른다. 마치 함수를 만들고 호출하는 것과 유사하다.

함수와 유사한 이유가 있었는데 바로 괄호 안을 변수로 치환하여 mixin을 부를 때 괄호안에 변수로 치환한 속성의 값을 넣어줄 수 있다는 것이다.
말이 어려우니 예시로 설명하면
@mixin button($wid){
width: $wid
}
이렇게 하고 scss에서 부르면
@include button(100px);
width안에는 100px이 들어간다.
즉 이걸 활용해 각 item마다 a button의 width값을 다르게 넣어보면

이렇게 빨간 버튼이 하나하나 width값을 다르게 넣어줄 수 있다.

문제는 매개변수를 집어넣고 호출 시 괄호를 비우면 오류가 나게 된다.
이걸 방지하기 위해 default값을 넣어줄 수 있는데 아래와 같이 넣어주면 된다.

@mixin button($wid:100px) {
  display: block;
  width: $wid;
  }

이러면 실수로 값을 넣지 않아도 100px 로 들어간다.

마찬가지로 매개변수를 여러개 넣을 수도 있다.

비어있다면 기본 값이 들어간다.

@for 반복처리

hover시 모션

모션 관련 code

.wrap{
	.item{
        transition: 0.5s;
        transform: translateY(100px) rotateY(100deg);
        opacity: 0;
    
    	&:nth-of-type(1) {
          transition-delay: 0.2s;
          a {
            @include button($bg: hotpink);
          }
        }
        &:nth-of-type(2) {
          transition-delay: 0.4s;
          a {
            @include button($bg: aqua);
          }
        }
        &:nth-of-type(3) {
          transition-delay: 0.6s;
          a {
            @include button($bg: orange);
          }
        }
        &:nth-of-type(4) {
          transition-delay: 0.8s;
          a {
            @include button($bg: lightGreen);
          }
        }
    }
    
    &:hover {
        .item {
          transform: translateY(0px) rotateY(0deg);
          opacity: 1;
        }
      }
}

그런데 반복되는 코드가 눈에 보인다.
바로 nth-of-type, 이게 4개면 한개씩 변경하면 되지만 40개라면? 하나하나 고치기 어렵다. 이런 반복 구분을 쉽게 처리하는 @for기능에 대해 알아보자.

//반복처리
    @for $i from 1 through 4 {
      &:nth-of-type(#{$i}) {
        transition-delay: 0.1s * $i;
      }
    }

for 반복문 사용법과 유사하다. $i를 사용할 때는 #{$i}라고 입력해야하지만 연산식에서는 중괄호 안에 넣지 않고 그냥 사용해야 한다.

through는 4까지 포함하는 것이고, to를 사용하면 4를 포함하지 않는 3까지만 반복된다.

@each 반복처리

@for보다 좀 더 범용적인 반복문 each에 대해 알아보자

@for는 숫자밖에 반복이 안된다. 하지만 color를 반복하고 싶을 때에는 @each문으로 편하게 처리할 수 있다.

// each 반복문
    $bgs: (hotpink, aqua, orange, lightGreen);

    @each $el in $bgs {
      $num: index($bgs, $el);
      &:nth-of-type(#{$num}) {
        a {
          @include button($bg: $el);
        }
      }
    }

우선 bgs라는 변수를 만들어 컬러를 넣어준 뒤 each를 이용해 $el에 bgs의 컬러를 넣어준다.

아까 위에서 for문으로 구현했던 것도 같이 넣어준다.

    @each $el in $bgs {
      $num: index($bgs, $el);
      &:nth-of-type(#{$num}) {
        transition-delay: $interval * $num;

        a {
          @include button($bg: $el);
        }
      }
    }