Sass 대화형 셸

SassScript 간편 실험실

수정3-4분 읽기태그: Sass, CSS Preprocessor, Web Development

대화형 셸 Interactive Shell은 SassScript 표현식을 실행하고 결과를 확인하는 도구다.1

SassScript 표현식을 스타일시트에서 작성하기 전에 대화형 셸을 이용하여 헷갈리는 데이터 유형이나, 애매하고 복잡한 변수, 함수 연산의 결과를 미리 확인하면 표현식의 결과를 명확히 할 수 있다. 또한, Sass 파일을 생성하지 않고 SassScript 표현식을 직접 작성하고 결과를 바로 얻을 수 있으므로 문법을 배우는 단계에서 실습하기에 좋다.


대화형 셸 사용법

  1. 맥의 '터미널'이나 윈도우의 '명령 프롬프트' 등 운영체제가 제공하는 기본 커맨드라인 인터페이스나, IDE가 내장한 커맨드라인 인터페이스를 연다.
  2. sass -i를 입력한 후 enter 혹은 return을 누른다.2
  3. >>가 표시되며 대화형 셸이 열린다.
  4. 실험할 SassScript 표현식을 입력한 후 enter 혹은 return을 누른다.
  5. 셸이 결과를 보여준다.
  6. 다음 줄에 >>가 표시되며 셸이 또 다른 입력을 기다린다.
  7. 입력을 반복해 SassScript 표현식을 시험한다.
대화형 셸 사용 예시
$ sass -i
>> 'Hello, Sassy World!'
"Hello, Sassy World!"
>> 10px + 5px / 2
12.5px
>> 10, 20 30
(10, (20 30))
>> random(100)
82
>>

Footnotes

  1. 원문

  2. 대화형 셸을 사용하기 위해서는 Sass가 컴퓨터에 설치되어 있어야 한다. 설치하지 않았다면 Sass 설치하기를 참고해 설치한다.