Sass 사용하기 - 출력스타일과 주석사용하기 / '&' 사용하여 상위 선택자 참조하기

 

 

 

1. sass 출력 스타일

: sass는 4가지의 css 출력 스타일을 지원한다.

그 4가지는  1) 중첩(nested, 기본), 2) 확장(expanded), 3) 축약(compact), 4) 압축(compressed) 가 있다.

 

 

1) 중첩 (nested) 

: sass 출력스타일중 기본으로, 중첩된 형식이다. 

html 구조를 반영하기 위해 규칙마다 들여쓰는 스타일이다.

이런식으로 들여써지기 때문에 스타일 구조를 쉽게 알아 볼 수 있다.

 

 

2) 확장(expanded)

: 직접 작성한 css 스타일과 유사하다.

기본 중첩 스타일 대신 확장 스타일을 사용하려면 sass 파일을 감시하라는 명령어에 플래그를 추가하면 된다.

$ sass --watch --style expanded style.scss:style.css

 

3) 축약(compact)

: 한줄에 하나의 선언문이 들어가며 선택자가 강조되는 형식.

왼쪽부터 코드를 줄줄줄 쓰는 형식이다.

$ sass --watch --style compact style.scss:style.css

 

 

4) 압축(compressed) 

: 스타일시트의 파일 용량을 줄이기 위해 공백과 줄바꿈을 모두 없애는 형식. 

효율성을 위한 출력스타일이고 사람을 위한 것이 아니기 때문에 코드를 읽는것이 거의 불가능하다.

$ sass --watch --style compressed style.scss:style.css

 

 

 

2. sass 에서 주석사용하기

:sass 에서는 css에서 사용되는 여러줄 짜리 주석 뿐만 아니라 스크립트에서 사용되는 한 줄 짜리 주석 도 지원한다.

 

1) 일반 css에서 사용하는 주석 

단, 압축 스타일에는 보이지않는다.

/* 최종 css 파일에서 보일 여러줄 짜리 주석입니다. 압축스타일에서는 보이지 않아요! */

 

2) 일반 css에서 사용하는 주석을 압축된 스타일의 출력파일에도 유지, 보존 시킬 수 있는 법

주석의 첫 글자로 ! 를 붙여서 중요한 주석들을 압축된 스타일의 출력파일에도 유지, 보존 시킬 수 있다.

즉 원래 여러줄 주석은 압축 스타일에서 보이지않지만, 압축스타일에서 보이게 하려면 주석 앞에 ! 를 붙이면 보인다.

정말 꼭 계속 보여야하는 중요한 주석은 주석 첫 글자로 !로 붙여서 다음과 같이 쓰면 된다.

/*! 이 것은 최종 css 파일에서 보일 뿐만 아니라 압축된 스타일에서도 보인다!! */

 

3) 한 줄 짜리 주석

한 줄 짜리 주석은 스크립트 주석처럼 앞에 '//'을 붙인다.

단, 앞에서 보인 주석과는 다르게 최종 출력물에는 반영되지않는다.

// 한줄 짜리 주석입니다.

// 이것은 최종 css 파일에서 삭제됩니다.

 

 

3. &를 사용하여 상위 선택자 참조하기

:  &를 사용하여 상위 선택자(부모)를 참조하여 치환한다. 즉, & 에 부모 선택자가 대체된다는 뜻이다.

 

 

예를 들어 다음과 같이 쓸 수 있는데, 이것은 

아래와 같이 컴파일 된다. 

 

&에 부모 선택자가 대체 되기 때문에,

 :hover, :active, :visited, :link 를 쓸 수 도 있고, :last-child, :nth-child(), :nth-of-type(), :first-child 등을 쓸 수 도 있을 것이다.

 

 

또한 치환의 개념이기 때문에 다음과 같이 응용할 수 도 있다.

 

active 클래스를 줄 때도 응용할 수 있다.

 

확실히 불필요하고 반복되는 코드가 줄어드는 것을 확인할 수 있다.

내가 이해한 부분은 이정도 까지고, 아마 더 사용하다 보면 더 많은 부분으로 응용 할 수 있을 것 같다.