FrontEnd/HTML, CSS

[Compass / 컴퍼스] Create compass project

namhj 2020. 4. 24. 10:21
반응형

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

반응형