오프라인(내부망) 환경에 dart-sass 설치

date

Apr 18, 2023

thumbnail

gsc

Done

public

public

slug

sass-offline

author

tags

Frontend

Javascript

summary

sass/scss 컴파일러 dart-sass를 사용해보자

type

Post

updatedAt

Oct 20, 2023 01:42 AM

Introdution

설치 환경은 Windows 10 으로, Linux와 같은 다른 환경인 경우 아쉽지만 다른 글을 참고하길..

SCSS/SASS 란?

차이점

SASS 문법 예시

$primary-color: #007bff

.container
  padding: 1rem

  .card
    background-color: white
    border-radius: 0.25rem
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)

    .card-header
      background-color: $primary-color
      color: white
      font-size: 1.25rem
      font-weight: bold

    .card-body
      padding: 1rem

SCSS 문법 예시

$primary-color: #007bff;  //변수 선언

.container {
  padding: 1rem;

  .card { // 중첩문  css에서는 [ .container .card ] 와 같다.
    background-color: white;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    .card-header {
      background-color: $primary-color; //변수의 사용
      color: white;
      font-size: 1.25rem;
      font-weight: bold;
    }

    .card-body {
      padding: 1rem;
    }
  }
}

CSS 문법 예시

.container {
  padding: 1rem;
}

.container .card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.container .card .card-header {
  background-color: #007bff;
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
}

.container .card .card-body {
  padding: 1rem;
}

SCSS와 CSS 문법 설명

dart-sass 설치

1. 파일 다운로드

해당 git repository의 tags에 버전 관리가 잘되어있다. 다른 버전을 받고자 하는 경우 tags 목록에서 선택하여 적용하자.

2. 압축 해제 및 경로

C:\Temp\dart-sass
│  sass.bat
│
└─ src
       dart.exe
       LICENSE
       sass.snapshot

3. 환경 변수 설정

• 윈도우키 혹은 시작 메뉴에서 ‘시스템 환경 변수 편집’ 을 검색하고, 이동한다.

• ‘환경 변수’ 클릭

• 시스템 변수 리스트에서 ‘Path’를 선택하고 편집한다.

• ‘새로 만들기’ 를 선택하고, 본인이 준비한 경로를 입력한다.

• 이후 실행하던 터미널이 있다면 종료 후 sass --help 명령어를 입력하여 설치 여부를 확인한다.

.scss의 파일을 .css로 변환

# 변환하려는 파일 경로로 이동하여, 명령어를 실행한다.

# 명령어 실행
sass sample.scss sample.css

동작 Tip. path에 설정한 sass 명령어 뒤에 실행한 파일명들은 sass.bat으로 arguments 값에 담겨 exe를 실행하게 된다.

• sample.scss ( 원본 scss 파일 )

// sample.scss
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

• sample.css ( 생성된 css 파일 )

.list {
  width: 100px;
  float: left;
}
.list li {
  color: red;
  background: url("./image.jpg");
}
.list li:last-child {
  margin-right: -10px;
}

마무리

참고