SassScript

Sass는 css를 javascript처럼 변수를 사용할 수 있고, 변수의 scope가 존재하며, 연산자란 개념도 있으며, 7가지 데이터 타입을 제공한다.
Sass에 대해서 공부할수록 Javascript와 사용하는 방식이 동일하다고 생각을 많이하였다.

변수

$font_color:#000;
$font_size : 20px;

.font: {
	size:$font_size;
	color:$font_color;
} 

이처럼 변수를 선언하여, 아래 css속성에 변수를 사용할 수 있으며, 변수의 Scope는 js와 동일하다.

Nesting(중첩)

html작성할때는 중첩되고 시각적인 계층 구조가 명확하다고 알 수 있고, scss를 사용하게 된다면 html을 작성할때와 동일한 시각적 계층 구조를 볼 수 있다.

nav {
	...
	ul {
    ...
    	li {
        
        }
    
    }
}

위 방식으로 중첩하여 사용할 수 있으며, 지나치게 중첩하여 사용할 경우 운영하기에 어려울 수 있다.

@Extend

기존 스타일을 상속할 경우에 사용하며, 동일한 속성을 중복으로 사용하는 경우에 사용한다.

.message {border:1px solid red;padding:15px;}
.success {
	@extend .message;
	color:#000;
}
.error {
	@exten .massage;
	color:red;
}

위 방식으로 사용하며, Sass를 사용하기 전에는 아래 방식으로 사용했다.

.message, .success, .error {border:1px solid red;padding:15px;}

코드를 보면 알겠지만, css에서도 위 방식으로 class명에 ,로 구분하여 동일한 속성을 넣어 사용했었다.

Mixin

Mixin을 보면서 javascirpt의 함수처럼 생각했고 실제로도 함수와 같이 argument를 받을 수 있다.

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.group { @include transform(rotate(30deg)); }

위 코드를 보면 javascript를 해보았다면 쉽게 이해할 수 있고, 내가 읽은 책에서는
Sass Framework를 사용하는 방식에 대해서 서술되어 있었고, 참고 사이트에서도 추천해주는 Framework / libary를 찾아볼 수 있었다.