[Scss] scss 설치하기 (with. koala)

CSS Preprocessor

SASS(Syntactically Awesome Style Sheets)란?

간결하고 격식을 갖춘 CSS 문법을 제공

별도의 컴파일 과정을 통해 기능을 확장하고 반복적 작업을 자동화하게 도와주는 툴

---

설치 및 준비작업

http://koala-app.com/

Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

 

---

코알라 다운로드 하면 아래와같은 창이 뜬다.

 

settings - Sass - Default Options에서 Source Map, autoprefix(접두사) 은 체크해둘것

1. Source Map: sass 파일을 css로 변환시킬때 서로 연결시켜주는 코드생성을 해야 하기 때문에

2. Autoprefix : 접두사를 자동으로 달아주는 옵션 체크 필수

3. output Style : css파일로 변환되었을때 코드를 어떻게 정리할것인지?

• nested : 기본값. 스타일 지정을 하지 않아도 계층구조이면 들여쓰기가 된다.
• expanded : 계층구조이더라도 들여쓰기를 하지 않는다.
• compact : 줄바꿈이 없는 한줄처리
• compressed : 모든 줄바꿈, 공백 제거

sass 변환스타일의 종류 참고

 

//scss

.section {
    background: white;
    .title {
        color: green;
    }
    .description {
        text-align: center;
    }
}

//output style : expanded

.section { 
	background: white;
}
.section .title { 
	color: green;
}
.section .description {
	text-align: center;
}

//output style : compressed

.section { background: white; }.section .title { color: green; }.section .description { text-align: center; }

---

세팅하기

 

테스트용 파일 만들고 html파일을 생성한다.

koala tool을 통해 테스트용 파일을 찾으면 아래처럼 파일이 생성된다.

 

css파일과 .map파일 자동생성됨

source.map 코드는 파일 호환을 위한 코드로 삭제하면 안된다.

 

scss에 변수를 선언했을 경우 오른쪽 css파일에 적용된 모습