Stylus 는 CSS 코드 전처리 도구로 , 텍스트 편집기에서 더 쉽게 작업할 수 있도록 해줍니다. 아래에서 그 이유를 설명하겠습니다.
이것은 우리가 알고있는 스타일 시트입니다.
본문 {글꼴 : 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius : 5px; -moz-border-radius : 5px; 테두리 반경 : 5px; }
Stylus 로 만든 스타일시트도 이와 동일합니다.
본문 글꼴 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
열쇠는 어디 있지? 세미콜론이랑 콜론은 어디로 갔지? 흔적도 없이 사라졌네. 스타일러스가 다 알아서 해주잖아.
CSS 와 HTML을 이제 막 배우기 시작했다면 Stylus 사용은 권장하지 않습니다 . 작동 방식을 잊어버릴 가능성이 있기 때문입니다. 하지만 이 분야에 어느 정도 경험이 있고 코드를 작성하는 데 드는 시간과 노력을 절약하고 싶다면 사용해도 괜찮습니다.
파이썬 프로그래머라면 Stylus 에서 익숙한 것과 매우 유사한 환경을 발견할 수 있을 것입니다. 들여쓰기만 정확하게 하면 모든 기능이 원활하게 작동하기 때문입니다.
설치
Stylus를 사용 하려면 Node.js를 설치해야 하는데 , Node.js 는 Community 브랜치에 있으므로 설치를 진행하겠습니다.
$ sudo pacman -S nodejs
그리고 나중에 Stylus를 설치합니다. 전통적인 방법은 다음과 같습니다.
$ npm install -g stylus
잘 설치되지만 저에게는 작동하지 않으므로 AUR에서 설치하는 것이 훨씬 쉽습니다.
$ yaourt -S nodejs-stylus
스타일러스 사용 방법
자, 이제 Node.js 와 Stylus가 설치되었습니다 . 어떻게 사용할까요? 간단합니다. 다음과 같은 파일들이 있는 디렉토리가 있다고 가정해 보겠습니다.
-dir-index.html-style.css
우리가 해야 할 일은 작업할 style.styl 파일을 만드는 것입니다. 이 파일에는 다음과 같은 내용을 넣을 수 있습니다.
body background-color #ffff font-size 12px a. button color red padding 10px
파일을 저장하거나 변경해도 아무런 변화가 없습니다. 파일을 "컴파일"하는 중이 아니기 때문입니다. 컴파일하려면 style.styl 파일이 있는 디렉토리에서 터미널을 열고 다음 명령어를 실행합니다.
stylus -c style.styl
하지만 style.styl 파일을 저장할 때마다 코드를 실행해야 하는데, 다행히 그럴 필요가 없습니다. 동일한 명령어에 -w (감시) 매개변수를 추가하면 다음과 같은 결과가 나타납니다.
stylus -c -w style.styl보기 /usr/lib/node_modules/stylus/lib/functions/index.styl 컴파일 된 style.css보기 style.styl 컴파일 된 style.css 컴파일 된 style.css
즉, 파일이 자동으로 컴파일됩니다. .. 결과가 나올까요?
body {background-color : #fff; font-size : 12px} a.button {color : # f00; padding : 10px}
보시다시피, 이 프로그램은 CSS 코드를 생성할 뿐만 아니라 불필요한 공백을 제거하여 스타일시트 용량을 줄여줍니다. 😊
뿐만 아니라, Stylus는 CSS 파일을 자체 형식으로 변환할 수 있게 해주고, 그 구문을 활용하는 방법 또한 매우 다양합니다. 이건 그저 맛보기일 뿐입니다. 관심 있으시다면 Stylus에 대해 더 자세히 알아보시기를 권합니다.