Node 기반 SASS 입문하기

오랜만에 html, css, javascript로 코딩을 해야 하다 보니, 영 기존처럼 하기에는 귀차니즘이 생겨버렸습니다. 😅

그동안은 딱히 관심 갖을 만한 일은 없었으나 귀찮은 건 너무 싫으니 없던 관심이 생기게 되면서 이번 기회에 입문해보려고 합니다. 

 

공식문서를 보고 하나씩 따라하거나 강의를 보고 공부해도 좋지만,

전반적으로 한 번 짧게 겉핥기 식으로 작성해보고 강의를 들으면 이해하는데 좀 더 도움이 되지 않을까 싶습니다. 

 

참조: https://sass-lang.com/

1. 환경세팅

그럴 리 없겠지만 node가 없다면 설치 

기존 버전(node-sass, libsass)는 폐지되었다고 하니 Dart Sass를 사용하라고 하네요. 

npm install -g sass


// 만약 써보고 다시 삭제하고 싶다면 
npm remove -g sass 

 

sass-practice라는 디렉터리를 만들고 vscode를 열어줍니다. 

mkdir sass-practice
cd sass-practice 
code .

 

그리고 src 디렉터리를 src 디렉터리에서 생성한 뒤 scss 파일을 만들어봅니다.

// src/style.scss
$color: red;

이제 이 파일을 브라우저가 읽을 수 있도록 css 파일로 변환시켜줘야 합니다. 

변환하는 방법은 다음과 같은 명령어를 사용합니다.

sass scss디렉터리명/css파일명:디렉터리명/파일명 // 일괄변환
sass --watch scss디렉터리명:css디렉터리명 // 실시간변환

이렇게 sass 뒤에 scss가 저장되어있는 디렉터리명 : css로 변환된 파일이 저장될 디렉터리명을 적어주면 됩니다. 

--watch 명령어를 사용하게 되면 저장할 때마다 실시간으로 변환돼서 편리하게 사용할 수 있습니다. 

 

만약 node를 통해 설정해서 쓰고 싶다면 package.json에서 실행 명령어를 추가하면 실행할 때마다 경로를 작성하지 않아도 됩니다. 

npm init -y를 통해 package.json 파일을 생성해 주세요. 

그리고 package.json 파일을 열어 실행 스크립트를 추가해 줍니다.

{
  "name": "sass-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:sass": "sass src:dist", // 일괄 변환 추가
    "watch:sass": "sass --watch src:dist " // 실시간 변환 추가
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

이렇게 하면 이제 우리는 저동 컴파일을 하기 위해 npm run watch:sass 라는 명령어만 치면 됩니다. 

 

2. 사용하기

제가 간단하게 작성해본 샘플은 다음과 같은 기능을 포함하고 있습니다. 

변수사용, mixin 사용, extend 사용, for / if 문 사용

 

샘플화면

우선 마크업과 스크립트를 작성해 줍니다. 

<div class="wrap theme1">
  <div class="inner">
    <button class="changeTheme btn">Chagen theme</button>
    <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio quas, quos doloremque, temporibus eveniet sed explicabo, reiciendis ea assumenda quam amet vitae. Eveniet repellat ipsam adipisci, nostrum ipsum inventore totam?
    </p>
    <ul class="list">
      <li class="item">html</li>
      <li class="item">sass</li>
      <li class="item">javascript</li>
      <li class="item">react</li>
    </ul>
    <span class="message">I am message </span>
  </div>
</div>

<script>
    const btn = document.querySelector('.changeTheme');
    const wrap = document.querySelector('.wrap');
    btn.addEventListener('click', function(){
        if(wrap.classList.contains('theme1')) {
            wrap.classList.replace('theme1', 'theme2');
        } else {
            wrap.classList.replace('theme2', 'theme1');
        }
    })
</script>

스크립트는 간단하게 wrap에 theme1 클래스명과 theme2 클래스명을 토글 시켜주는 기능입니다. 

scss에서 template를 만들고 각각 클래스 명일 때 parameter값을 주어 다르게 표현하려고 합니다. 

이제 src/style.scss에서 template을 작성합니다. 

 

1. MIXIN

$padding: 2rem;

@mixin template($theme_name, $theme_bg, $theme_color) {
    padding: $padding;
    background: $theme_bg;
    color: $theme_color;
}

.theme1 {
    @include template("theme1", darkred, lightpink);
}

.theme2 {
    @include template("theme2", darkblue, lightblue );
}

굳이 재사용성이 없는 변수 선언은 지양하는 게 좋겠지만 다음과 같이 mixin내부에서도 $padding에 접근할 수 있다는 것을 보여주기 위해 다음과 같이 써보았습니다.

mixin 선언은 @mixin, 사용 시에는 @include를 사용합니다. 

$theme_bg, $theme_color를 보면 mixin에서 파라미터 사용이 가능하다는 것을 알 수 있습니다. 

 

2. extends

$msg_color: lightgreen;

{ ... }

.message {
    color: $msg_color;
    font-size: 1.2rem;
    font-weight: bold; 
    text-decoration: underline;
}

.theme1 {
    @include template("theme1", darkred, lightpink);
    .message {
        $msg_color: rgb(241, 146, 241);  // 변수 재선언
        @extend .message;  // extend
        color: $msg_color; // 재선언된 변수 적용
    } 
}

$로 선언한 변수를 부모 클래스 내에서 재선 언 할 수도 있습니다. 

또한 .message라는 스타일을 extend를 통해 가져다 사용할 수도 있네요. 

 

3. if문

@mixin btn($theme_name) {
    border: 0 none; 
    padding: 4px 8px; 
    border-radius: 2px;
    cursor: pointer; 
    @if $theme_name == "theme1" {
        background: palevioletred;
        color: white;
    } @else {
        background: skyblue;
        color: darkblue;
    }
}

.theme1 {
    button {
        @include btn("theme1");
    }
    {...}
}

.theme2 {
    button {
        @include btn("theme2");
    }
    { ... }
}

각각 다른 파라미터 값을 주어 파라미터 값의 매칭 여부를 확인하여 다른 스타일을 줄 수 있습니다. 

함수 선언 시에는 @가 붙습니다. 만약 return 할 일이 있다면 @return 이렇게 써줘야 합니다. 

 

4. for문

.list {
    list-style-type: none;
    padding: 0;
    @for $i from 1 through 4 {
        .item:nth-child(#{$i}):before {
            content: $i + ': ';
            margin-right: 5px;
        }
    }
}

for문을 사용하여 nth-child를 통해 앞에 카운트를 붙였습니다. 

실렉터 내부에서 변수를 사용할 때에는 #{ } 안에 써줘야 하네요. 

 

해당 목록을 배열 변수에 담아 length값을 체크해서 사용해도 되지만, 이렇든 저렇든 이미 html에서 선언했던 부분을 한번 더 써줘야 하기 때문에 그냥 4로 박았습니다. 만약 더 여러 군데에서 사용해야 한다고 하면 배열을 선언해서 쓰는 것이 훨씬 편리할 것 같습니다. 

 

5. 파일 분리하기 

기존에 css내에서 외부 css를 불러올 때랑 동일합니다.

@include를 사용합니다. 

// src/mixin.scss

@mixin template($theme_name, $theme_bg, $theme_color) {
    ...
}

@mixin btn($theme_name) {
    ...
}

@import './mixins.scss';

{...}

이렇게 변수나 mixin을 한파일에 관리하면 더 좋을 것 같습니다. 

 

결과