SASS

설치 및 적용

SASS 컴파일러란?

사스의 포멧으로 만들어진 파일을 CSS로 변환해주는 도구

윈도우에서 설치

  1. http://rubyinstaller.org/에 방문해서 ruby를 설치한다.
  2. 윈도우키+R키를 누르고 cmd를 입력한다.
  3. gem install sass 를 입력해서 sass 컴파일러를 설치한다.

맥과 리눅스에서 실치

  1. 맥과 리눅스에는 ruby가설치 되어 있기 때문에
    gem install sass를 입력해서 sass 컴파일러를 설치한다. 

사용법

아래는 style.scss 파일이 변경될 때마다 자동으로 style.css파일로 변환해주는 명령

sass --watch style.scss:style.css

아래는 stylesheets/sass 디렉토리에 있는 모든 sass 파일을 CSS로 변환한 후에 stylesheets/compiled 디렉토리로 이동하는 명령

sass --watch stylesheets/sass:stylesheets/compiled

기존의 CSS를 Sass로 변환

이미 CSS로 프로젝트가 진행된 상황에서 Sass를 도입하는 방법

사용방법

Sass 컴파일러는 --watch 옵션을 통해서 사스파일을 감시하다가 그 파일이 수정되면 자동으로 CSS로 변환해주기 때문에 html에서는 컴파일된 CSS를 인클루드해서 페이지가 잘 렌더링되는지 확인하고, 이 CSS파일을 그대로 서버에 반영하면 된다. 

댓글

댓글 본문
  1. hanjaelee
    2024-03-14 수강완료
    답글
  2. jeisyoon
    2021.09,30 설치 및 적용
    답글
  3. kain
    인터넷이안되는곳에서 sass 설치방법 아시나요?
    답글수정삭제
  4. hei
    안녕하세요. Sass is watching for changes. Press Ctrl-C to stop. 이 메시지가 나왔는데 폴더에 파일이 생성되도 감지가 안됩니다. 뭐가 문제일까요?
    답글수정삭제
  5. eugene@octocolumn.com
    오류 : gem을 실행하는 중 ... (Gem :: FilePermissionError)
    / usr / local / bin 디렉토리에 대한 쓰기 권한이 없습니다.

    이 문제를 어떻게 해결해야 하나요??? 맥북입니다.

    ㄴ sudo gem install sass 해보시고 그래도 안되면 xcode-select --install 그래도 퍼미션 에러나면
    sudo gem install /usr/local/bin sass
    답글수정삭제
  6. thdbsgh3443@naver.com
    오류 : gem을 실행하는 중 ... (Gem :: FilePermissionError)
         / usr / local / bin 디렉토리에 대한 쓰기 권한이 없습니다.

    이 문제를 어떻게 해결해야 하나요??? 맥북입니다.
    답글수정삭제
  7. thdbsgh3443@naver.com
    ERROR: Could not find a valid gem 'sass' (>= 0) in any repository
    라고 뜨는데 어떻게 해야 하나요??ㅠㅠㅠ
    답글수정삭제
  8. 엄태성
    와 감사합니다~~:)진짜짱!
    답글수정삭제
  9. 혜지
    헐 ㅜㅜ 맥에서 오류났는데 두번째꺼 했더니 돼요 ㅎㅎ감사해요
    대화보기
      답글수정삭제
    • 지ㅣ선
      헉 너무감사합니다 ㅠㅠ!!!!!!!!!!!!!!!
      대화보기
        답글수정삭제
      • 기리동
        감사합니다 왜 안되지 생각하고 있었어요 ㅋㅋ
        대화보기
          답글
        • 쩡찌
          혹시 gem install sass 입력하고 error 나시는 분들은
          gem sources -r https://rubygems.org/
          gem sources -a http://rubygems.org/
          이걸 입력하고 다시 gem install sass 해보세요. 바로 되네요ㅎㅎ
          답글
        • 류11
          출석~
          답글수정삭제
        • dmdanbi@nate.com
          감사합니다~ :)
          대화보기
            답글수정삭제
          • 배종진
            맥과 리눅스에서 실치 < 오탈자요!
            답글수정삭제
          • Dri
            sass is watching for change~ 내용이 나와서 해당폴더에 문서를 만들어봤는데 아무것도 감지하지 못하네요 ㅠㅠ 왜그런걸까요...
            답글
          • 이웃집토토로
            리눅스 우분투14.04LTS 사용자는 터미널에서 다음의 명령어를 실행시켜 보십시오.
            sudo apt-get install ruby
            sudo su -c "gem install sass"

            sass 실행 후 다시 커맨드모드로 빠져나오는 법은
            ctrl + c 를 누르시면 됩니다.
            답글
          • 안광현
            맥에서 OSX El Capitan 사용자는 sudo gem install sass 이라고 치면 설치됩니다.
            답글
          • JuHye Kelly Yoo
            저는 윈도우 cmd에서 gem install sass한다음에 sass를 치면 그대로 멈추네요. ㅜㅜ.왜그럴까용? ㅠㅠ
            답글
          • stella
            감사합니다 난감했는데 여기서 도움얻고 갑니다
            답글수정삭제
          • Ji Young Yoon
            감사합니다. ^-^ 잘보았습니다.^-^b
            답글
          • 조중현
            감사합니다
            답글수정삭제
          • Aiden
            감사합니다^^
            대화보기
              답글
            • 이히힣힣
              인코딩 설정하는 옵션입니다.
              참고하세요~

              http://blog.pixelastic.com......ws/
              대화보기
                답글수정삭제
              • 에이든
                인코딩에 대한 내용도 다뤘으면 좋겠습니다.
                보통 CSS 최상단에 @charset "UTF-8";을 선언했는데 컴파일 과정에서 없어지고
                주석이나 폰트이름에 사용된 한글때문인지 아래와 같은 오류가 뜹니다.

                Error: Invalid CP949 character "\xEB"

                어떻게 인코딩을 설정해야 할까요?
                답글
              • Young Kwang Cho
                --sourcemap=none 옵션을 설정하시면 sourcemap 파일이 생성되지 않습니다.
                자세한 내용은 http://sass-lang.com......tml 확인하시면 되구요.
                cmd 창에서 sass --help 명령어로도 확인 하실 수 있습니다.

                ex) sass --watch style.scss:style.css --sourcemap=none
                대화보기
                  답글
                • hommeYo
                  질문이 있습니다.
                  css 변환 될때 .map라는 파일이 생성되고
                  css 파일 하단에는 아래와 같은 문구가 생성이 되고 있습니다.
                  .map 파일은 머이며? css 파일에 아래와 같은 문구가 안생기게 하려면 어떻게 하나요?

                  /*# sourceMappingURL=test.css.map */
                  답글
                • codeJS
                  [해결방법] 윈도우에서 ruby를 깐후 gem 명령어가 동작하지 않습니다.
                  위의 방법으로 ruby 설치 할 때 동의 후 옵션 선택 화면이 나오는데,
                  여기서 Add Ruby executables to your PATH 를 체크 후 설치해야 gem 명령어 실행이 가능합니다.

                  내용 수정이 되야 하겠네요~
                  답글수정삭제
                • egoing
                  정정했습니다. 감사합니다 :)
                  대화보기
                    답글
                  • josephine0258
                    Ctrl+R 잘못쓰여졌어요..
                    답글
                  • Jayson Sirius
                    윈도우에서 설치 부분에 ctrl + R 키눌러서라고 나와있는데 시작키+R키 입니다.
                    그리고 원인은 모르겠으나 체크를 해제하고 ruby를 깐 후에 gem install sass라고 치면 gem이란 명령어는 없다고 나오네요...참고바랍니다..
                    답글수정삭제
                  • Dongju Seo
                    우연히 구글에서 생활코딩 사이트를 발견하게 되어 사이트를 둘러보게되었습니다.
                    깔끔하게 로드맵을 짜셔서 강의를 진행하시는것을 보았는데 알차고 좋네요. :)
                    저도 제 개인사이트를 대대적으로 개편하면서 모두 영어와 한국어로 중점적으로 강의를 할 생각입니다. (다국어는 차후에 지원)
                    생활코딩 화이팅 입니다.
                    답글수정삭제
                  • 최정아
                    기존 방식은 css 파일을 <link href="/kkomengs/css/mobile30.css" rel="stylesheet" type="text/css">이런식으로 불러오자나요~ 만약 scss를 사용하게 되면 head부분에서 어떻게 코드를 써야하는지 궁금합니다. 그리고 이왕이면 새로운 html 파일을 만들어서 간단하게라도 새 페이지를 만드는 과정을 보여주실수는 없는지요~로컬에서 scss와 css가 만들어지는건 알겠는데 실제 html 파일과 어떻게 연동하는지 적용되는건지 ....로컬에서만 scss컴파일이 가능한건지 서버에서도 가능한건지.....감을 잡을 수가 없습니다.
                    답글수정삭제
                  • egoing
                    예 CSS로 변환해서 올립니다. 그런데 정확하게는 CSS 전환이 실시간으로 이루어지기 때문에 개발환경에서도 CSS로 변환된 결과가 적용된 페이지를 보면서 개발을 하고요. 실서버에 올릴 때는 자연스럽게 변환된 파일이 함께 올라가겠죠. 그 부분에 대한 설명이 부족했군요. 보강할께요
                    대화보기
                      답글
                    • 장재원
                      scss는 개발 유지보수 할 때 사용하고 서버에 올릴때는 css로 변환해서 올리나요? 영상 봤는데 그부분은 잘 안나온 것 같아서 헷갈리네요ㅜ
                      답글