CSS를 공부하던 중에 Sass라는 것을 알게되어, 사용에 앞서 개념적으로 공부해 볼려고 한다.
Sass 란?
Sass는 'Syntactically Awesome StyleSheet' 의 약자이다. 직역하자면 '구문적으로 쩌는 스타일시트' 라고 한다.
이름이 멋있어서 Sass에 대해 조금 더 자세히 알아 보았다.
CSS를 확장한 메타 언어
메타언어(metalanguage)는 대상을 직접 서술하는 언어 그 자체를 다시 언급하는 언어나 심볼(symbol)로서 고차언어(高次言語)라고도 한다.
출처: https://ko.wikipedia.org/wiki/%EB%A9%94%ED%83%80_%EC%96%B8%EC%96%B4
즉, Sass의 경우는 CSS를 보다 효율적으로 사용할 수 있도록 기능을 확장한 언어라고 할 수 있다.
Sass는 프로그래밍적으로 CSS를 적는다.
프로그래밍적으로 적기 때문에 코딩의 효율이나 소스코드의 유지보수가 수월해 진다.
Sass는 함수나 변수를 처리하기 때문에 'CSS 프리 프로세서' 라고 불리기도 한다.
'CSS 프리 프로세서' 란,
변수나 조합, 함수등으로 작성된 코드를 컴파일 하여 css로 변환하여 사용할 수 있게 하는
css 확장언어 이다.
css 프리 프로세서로는 Sass, LESS, Stylus 가 있다.
출처: http://study.zziraweb.com/less/less/?ckattempt=3
Sass 사용법
Sass를 사용하는 방법은 'SASS'와 'SCSS' 두 가지가 존재한다.
1. SASS
div
background-color: black
margin: 0 auto
p
padding: 10px
span
font-size: 1em가장 오래 전부터 사용된 방법이다. 위 코드에서 보듯이 문법이 매우 간소화되어 있어, 코딩을 컴팩트하고 간결하게 할 수 있다.
특징으로는 세미콜론을 적을 필요가 없다는 점이다.
2. SCSS
div{
background-color: black;
margin: 0 auto;
p{
padding: 10px;
span{
font-size: 1em;
}
}
}SCSS는 SASS가 CSS와의 호환성이 부족한 부분이 있어 만들어진 방식이다.
SCSS의 가장 큰 장점은 CSS의 문법 그대로 사용할 수 있다는 점이다. 이에 때문에 SCSS를 처음 사용하더라도 CSS와 문법이 유사하기 때문에 적응하기 쉽다.
