반응형
compass 프로젝트 생성
[터미널, 생성하고 싶은 위치에서]
compass create projectFolderName
해당 디렉터리에 config.rb 파일과 .sass-cache, sass, stylesheets 폴더가 생성 됨
기존 프로젝트에 compass 임포팅
compass install compass
완료시 아래 메시지가 출력됨
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
2.메시지가 시키는대로 HTML 헤드에 복붙
3.생성된 sass파일 -> sass 폴더로
4.sass와 같은 이름의 css 파일을 만들고 -> stylesheets 폴더로
5.sass 파일 최상단에 @import 'compass'; 추가
6.위의 세팅을 마친후에 컴파일 하기
compass compile sass/*(또는 컴파일 하려는 sass)
7.실시간으로 컴파일 watch를 사용하면 컴패스가 sass를 css로 바로바로 컴파일 해준다.
compass watch sass/*
참고 LevelUpTuts : https://www.youtube.com/channel/UCyU5wkjgQYGRB0hIHMwm2Sg
반응형
'FrontEnd > HTML, CSS' 카테고리의 다른 글
Tailwind CSS vs SCSS (Sass) (0) | 2024.06.04 |
---|---|
CSS LineArrow (0) | 2021.12.22 |
[Compass] Sass, Compass, ruby install (0) | 2020.04.22 |