[Sass] 문법 기초

[출처] 생활코딩

[출처] http://taegon.kim/archives/3667

[참고] http://sass-lang.com/guide

[참고] http://soooprmx.com/wp/archives/5059

중첩(Nesting)

CSS의 특성으로 인해서 셀렉터를 중복해서 사용해야 하는 경우가 많은데 Sass의 Nesting을 이용하면 코드의 양을 줄이고 연관된 코드끼리 그룹핑할 수 있다.

부모 엘리먼트를 참조(Parent References)

(마우스가 엘리먼트 위로 올라왔을 때를 의미하는) :hover와 같은 pseudoclasses의 경우는 특수기호 '&'를 이용해서 부모 엘리먼트를 참조할 수 있다.

변수(Variables)

CSS내에서 변수를 사용할 수 있다. 변수이름은 '$'로 시작해야 하고, 변수의 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 칼러(#ce4dd6)가 있다. 변수를 이용하면 크기나 색상과 같은 값을 일괄적으로 변경할 수 있다.

연산자와 함수(Operations and Functions)

연산자와 함수를 이용해서 엘리먼트의 크기나 좌표 또는 색상을 동적으로 변경할 수 있다.

• 연산자 : +, -, *, /, %
• 함수 : lightness, hue, saturation, 기타

Interpolation

'#{}'를 사용해서 변수로 속성이나 선택자의 이름을 동적으로 치환할 수 있다.

Mixins

선택자와 속성을 재활용할 수 있도록 해주는 방법이다. 선언할 때는 '@mixin'으로 시작하고, 호출할 때는 '@include'을 사용한다.

인자(Arguments)

Mixin의 진정한 힘은 인자를 통해서 나타나는데, 인자는 Mixin 안에서만 사용되는 지역변수를 의미한다. 인자는 기본 값을 가질 수 있다.

불러오기(@import)

CSS는 @import 명령을 지원하는데, 이 명령은 다른 CSS를 불러오는 것이다. 이것은 별도의 파일을 네트워크를 통해서 로딩하는 것인데, 네트워크 커넥션은 느리고 비싼 행위다. Sass에서 import는 그 파일의 내용을 실제로 가져와서 파일에 통합하다.

Sass는 import를 위한 이름규칙이 있다. 불러지는 파일은 partials라고 불리고, 이 파일은 '_'로 이름이 시작된다. 예를들면 _rounded.scss 와 같은 식이다. 이 파일을 불러올 때 Sass에서는 @import 'rounded'를 사용한다.

제어문

SASS에서만 제공하는 기능으로 @if / @else 조건문, @for / @each / @while 반복문을 제공한다. 다음은 조건문의 예제이다.

$type: monster
p
	@if $type == ocean
		color: blue
	@else if $type == matador
		color: red
	@else if $type == monster 
		color: green
	@else 
		color: black

@if 키워드 다음에는 괄호가 없으며, { … } 블럭은 반드시 사용해야 한다. 위 코드를 컴파일하면 다음과 같다.

p { color: green; }