scss 설치및 기본사용법 > 웹개발

• 목록

https://rubyinstaller.org/
ruby 설치 후

https://sass-guidelin.es/ko/
sass 설치 : gem install sass

http://compass-style.org
compass 설치 : gem install compass

http://frontend.diffthink.kr/2016/09/scss.html
compass 기본 사용법 참조


https://sass-lang.com/install
sass gui 툴

https://www.sassmeister.com/
온라인 sass 컴파일



1. 기본 컴파일 하기
scss style.scss:style.css

2. 파일이 변경될 때 마다 변환
파일 대상 : scss --watch style.scss:style.css
폴더 대상 : sass --watch src/sass/:public/stylesheets

3. 대상 폴더의 모든 scss 파일이 저장될 때 마다 css파일로 변환
scss --watch .:.


4. style의 종류 : nested(기본), compact, compressed, expended
   
    - nested : 뎁스별로 구분해서 컴파일
    - compact : 요소에 스타일이 속성을 한줄씩 정렬해서 컴파일
    - expanded : 요소에 모든 스타일을 한줄에 컴파일
    - compressed : 모든 요소를 공백없이 컴파일


    4-1. scss --style nested style.scss:style.scss        :

    4-2. scss --style compact style.scss:style.scss        : 구분마다 한줄에 표시

    4-3. scss --style expended style.scss:style.scss

    4-4. scss --style compressed style.scss:style.scss    : 모든것을 한줄에 표시


5. compass 기본설정 파일 생성

    compass create    : 기본파일 생성

    compass watch    : 수정이 있으면 자동 컴파일