[사스(Sass)] 2. Sass 사용법

지난 장에서 Sass가 무엇인지 어떻게 설치했는지 포스팅했습니다.

http://recoveryman.tistory.com/276

Ruby등의 언어를 설치해야 하기에 반드시 1장에서 설치 방법을 숙지해야 합니다.

1. Sass 는 파일 확장자 이름이 .scss 입니다.

~~~.scss 파일이 있으면 Sass를 사용했구나 아시면 될꺼 같습니다.

일단 테스트를 하기위해 어떠한 환경에서 .scss 파일이 css파일로 변환이 되는지 확인해 보겠습니다.

이러한 부분을 '컴파일' 한다 라고 합니다.

윈도우키 + R -> cmd 입력 후 엔터

윈도우OS 에서 명령 프롬프트를 실행시키는 단축키죠. (Git을 설치했다면 Git cmd가 실행될 수도 있습니다. 하지만 상관없습니다.)

Mac OS 라면 컨트롤 + 스페이스 -> terminal 입력 후 엔터 그러면 아래와 같은 혹은 아래와 비슷한 검은색 창이 열리게 됩니다.

2. 변수 Variables

작성방법은 다음과 같습니다.

$변수명: #ff0000;

div{
    color: $변수명;
}

한글로 써도 컴파일이 될까 의문이 들긴 하지만 된다고 해도 한글로 표기하는건 별로 좋은 방법은 아닐듯 합니다.

그래서 저는 이렇게 작성하겠습니다.

$red: #ff0000;

div{
    color: $red;
}

알아보기 쉽겠죠?

그리고 이렇게 작성한 'sassTest.css' 파일을 아무 드라이브의 적당하게 만든 폴더에 집어 넣겠습니다.

저는 D드라이브의 sass폴더의 css폴더에 sassTest.css를 만들었 습니다.

3. 그리고 cmd로 scss 파일을 css 파일로 변환 시켜줄 명령을 입력시켜 보겠습니다.

cmd 로 경로 이동 조차 하지 않을 때 어떠한 일이 생겨나는지 확인해 보겠습니다.

sass 작성한scss_파일명.scss 변환될_css파일명.css

아래 사진을 보면 에러를 출력합니다. 파일 또는 폴더를 찾지 못했다고 에러를 뱉어 냅니다.

그렇기에 반드시 경로를 바꿔 줘야 합니다.

혹시나 내가 D드라이브에다가 저장해서 D드라이브만 잡아놓으면 되지 않을까 해봤는데 확실한 경로를 정해줘야 합니다.

4. 이렇게 .scss 파일이 있는 곳으로 확실하게 이동해 줍니다.

그리고 3번에 있었던 명령을 다시 실행 시켜 봅니다.

아래 스샷을 보세요. 에러코드가 안나왔습니다.

하지만 제대로 컴파일 이 된지는 잘 모르겠습니다.

5. 그래서 D드라이브의 sass 폴더의 css 폴더를 확인해 봤습니다.

아래 스샷을 보시면 워... 뭔가 많이 생겨났습니다.

저기에서 저희가 원하던 sassTest.css 라는 파일이 생겨난걸 확인할 수 있습니다.

6. css 파일을 확인해 봤습니다.

제대로 컴파일 되어서 css 파일이 만들어 졌습니다. (전 사실 css 파일에 아무것도 없길래 뭔일인가 싶었더니 scss 파일을 작성만 해놓고 저장을 안했었습니다. ㅎㅎ)

7. 부모참조선택자 (Referencing Parent Selectors)

부모참조선택자는 말 그대로 부모Element 안에 자식Element를 선택할 때 사용됩니다.

그리고 & <- 이것을 Sass 에서는 부모참조선택자 라고 부릅니다.

부모&자식{

속성: 속성값;

}

저는 맨 처음엔 이렇게 작성했습니다.

첫번째 : $ span <- div 안에 span 잘 보시면 띄어쓰기 했습니다.

두번째 : &.div <- div의 클래스 이름이 div인것 띄어쓰기 안했습니다.

세번째 : $ span & a 잘 보시면 띄어쓰기 했습니다.

그리고 cmd로 돌아가 컴파일 합니다. 컴파일 안하면 변환이 안되요. (다음부터 컴파일 스샷은 생략하겠습니다.)

그리고 그 결과는 예상대로 출력되었습니다.

8. 불러오기 Import

Sass도 css 에서 @import 를 사용 할 수 있습니다.

css 에서 @import는 css 파일에서 다른 css를 불러오는 겁니다.

sassTest2.scss 를 sassTest.scss 와 같은 폴더에 만들어 줬습니다.

그리고 sassTest2.scss 에다가는 다음과 같이 작성하였습니다.

다시 sassTest.scss파일로 돌아가서 다음과 같이 sassTest2.scss 파일을 불러왔습니다. (혹시 에러가 뜬다면 세미콜론 ; <- 이것을 썻는지 확인해 주세요.)

@import "불러올_파일이름.scss";

아까 컴파일은 생략한다고 했었죠? css결과를 확인해 봤습니다.

9. mixin

mixin은 반복적으로 사용할 스타일을 하나의 변수로 처리합니다.

sass 의 소개 및 설치에서 맨 처음에 보셨을 것입니다.

그게 바로 이겁니다.

선언 : @mixin mixin명{}

호출 : @include mixin명{}

저는 boxStyle 라는 이름의 mixin을 만들고 클래스이름이 box, box2, box3인 곳에 이걸 불러왔습니다.

결과는 스샷과 같습니다.

10. 또한 인수로써 활용이 가능합니다.

선언 : @mixin mixin명(나는_넘겨받은_값을_받는변수){}

호출 : @include mixin명(내가_넘겨줄_값)

적은것만 봐서는 헷갈립니다. 다음 스샷을 봅시다.

#fff064 라는 걸 $color 로, 10px 을 $size로 적은 순서대로 넘겨줍니다. 하나만 넘겨주셔도 됩니다.

컴파일 결과는 다음과 같습니다.

11. 또한 인자에 기본값을 설정할 수 있습니다.

50번 라인을 잘 보시면 변수 $color 에는 값이 들어가 있습니다.

57번 라인을 잘 보시면 24px 만 들어가 있습니다.

이는, $size 에는 24px을 넘겨주고 $color에는 지정되어있는 기본값을 사용하겠다는 의미입니다.

※ 주의할 점은 기본값이 정해지지 않은 변수가 앞에 와 있어야 합니다. 안그러면 컴파일시 에러가 뜹니다.

컴파일 결과입니다.

12. 확장 Extend

확장에는 두가지가 있습니다.

첫번째 : A라는 곳에서 썻던 스타일을 B라는 곳에서 사용할때

두번째 : A라는 곳에서 사용했던 스타일을 B라는 곳에서 사용하는데 일부 속성값만 바꿔줄 때.

먼저 첫번째 입니다. 클래스 이름 menu에서 사용했던 스타일을 클래스 이름 menu1 에서도 똑같이 사용하고 싶다면(세미콜론 확실하게 써줍니다. 안쓰면 컴파일 시 에러 발생)

@extent 엘리먼트_이름;

컴파일 결과 입니다.

그리고 일부 속성만 바꿔주고 싶을 때

%변수명{}

@mixin과 상당히 비슷하게 쓸듯 합니다.

컴파일 결과 입니다. (@mixin과 비슷할듯 한데 취향껏 사용하시면 될듯 합니다. 혹은 둘다 섞어서 쓰셔도...)

13. css 컴파일 스타일 지정

여태껏 위에 보신것들은 뭔가 항상 해오던 css 정리가 아니였습니다.

이건 컴파일 된 css 의 정렬을 3가지 방법으로 출력할 수 있습니다.

1. sass --style nested 작성된scss명.scss 바꿔줄css명.css      <- 기본

2. sass --style expanded 작성된scss명.scss 바꿔줄css명.css      <- 확장

3. sass --style compact 작성된scss명.scss 바꿔줄css명.css      <- 축약

첫번째는 원래 기본으로 설정되어 있고 안하면 위의 스샷들 처럼 css가 컴파일 됩니다. 그러므로 스샷은 넘어가겠습니다.

두번째 확장 expanded 부터 보여드리겠습니다.

결과는 많이들 쓰는 이런 스타일

축약 compact

축약의 결과는 한줄로 이렇게 출력됩니다.

14. 매번 cmd 에서 컴파일 하는게 귀찮을 때가 있습니다.

scss 를 저장만 하면 자동으로 cmd가 저장한 scss를 찾아내 css로 컴파일 하는 명령어가 있습니다.

방법은 4가지가 있습니다. 꼭 지정한 폴더에서 하시길 바랍니다. 안그러면 대 참사가...

1. sass --watch 작성된.scss        <- 작성된 scss파일만 (변환된 css는 기본(nested)스타일로)

2. sass --watch --style 스타일종류 작성된.scss     <- 작성된 scss파일만

3. sass --watch .:.    <- 모든 scss 파일을 css로 변환 (변환된 css는 기본(nested)스타일로)

4. sass --watch --style 스타일종류 .:.    <- 모든 scss파일

아래와 같이 명령어 한 줄 이면

scss 를 저장시 저장한 scss를 찾아내 css로 자동으로 컴파일 해줍니다.

빠져나올때는 

컨트롤 + C 하라고 되어있네요.

그 후 y 를 입력해서 빠져나오든 컨트롤 + C 를 다시 한번 눌러주든 둘중에 맘에 드는 방법으로 하시면 됩니다.