프로젝트에 SASS를 추가하는 방법은 무엇입니까? 🤔

코스 로드맵을 추가했습니다.

SASS가 무엇이며 CSS보다 SASS를 사용하는 것이 더 나은 이유를 설명했습니다. 바로 지금, 우리는 그것을 프로젝트에 포함시키는 방법을 배우려고 합니다.

브라우저는 HTML, CSS 및 JS만 이해하므로 sass 파일을 이해하지 못합니다. 따라서 브라우저가 쉽게 파악할 수 있도록 Sass 스크립트를 CSS 파일로 컴파일해야 합니다.



다음 몇 줄에서는 Sass를 Css로 컴파일하는 3가지 방법에 대해 설명합니다.

#1. 명령줄

Sass를 CSS로 컴파일하는 가장 간단한 방법 중 하나는 sass 패키지를 사용하는 것입니다.

sass는 Windows, Mac OS X, Linux 및 Unix 운영 체제에 설치할 수 있습니다. NPM(Node Package Manager)을 통해서도 설치할 수 있습니다. 두 방법의 설치 과정은 매우 간단합니다.

NPM을 사용하여 sass를 설치하려면 먼저 컴퓨터에 node.js을 설치한 다음 노드 터미널을 열고 다음 단계를 수행해야 합니다.

1-실행node --version하여 노드가 제대로 설정되었는지 확인합니다.

node --version
> Expected: v16.16.0 or any other version

2- 설치 사스

npm install -g sass

이것은 npm의 저장소에서 패키지를 다운로드하고 시스템에 전체적으로 설치합니다.

3-Sass 파일 보기

sass -w style.sass style.css

자동으로 style.sass 파일을 style.css 파일로 컴파일합니다.

축하합니다 🎉 sass를 성공적으로 설정했습니다.

이제 이 Scss 코드를 로컬 Scss 파일에 복사하여 붙여넣으면

$socails : facebook twitter youtube;
@each $item in $socails {
    .#{$item}-img{
        background: url('../images/image-#{$item}.png');
    }
}

로 컴파일됩니다

.facebook-img {
  background: url("../images/image-facebook.png");
}

.twitter-img {
  background: url("../images/image-twitter.png");
}

.youtube-img {
  background: url("../images/image-youtube.png");
}

#2 VS 코드 확장

live-sass은 sass 컴파일에 사용되는 가장 효율적인 VS 코드 확장 중 하나입니다.

#3 온라인 컴파일러

설치 없이 Sass를 컴파일하는 sassMeister과 같은 일부 온라인 도구가 있습니다.



이제 sass로 더 깊이 들어갈 시간입니다. 다음 기사에서는 sass 구문에 대해 자세히 알아볼 것입니다.