Sass?
Sass는 ‘Syntactically Awesome Style Sheets’로 CSS의 전처리기, 즉 해석되어 CSS로 컴파일되는 스크립트 언어입니다. CSS의 복잡한 작업을 쉽게 할 수 있도록 하고, 코드의 재활용성과 가독성을 통해 유지보스를 높여주는 언어이자 도구로 CSS의 결함을 보정하는 것이 목적입니다.
Sass를 사용하는 이유
- @import : 정리된 코드
Sass는 CSS를 정리해주고 모듈화까지 해줍니다. 즉, 엄청나게 용량이 클 수 있는 CSS파일을 관리를 위해 여러 파일로 나누는 것보다 더 쉽고 효율적으로 만들어줍니다. 또한 @import를 사용해서 여러개의 파일을 하나의 파일에 담아서 사용할 수 있습니다. - Variable : 반복작업 줄이기
Sass에서는 변수를 사용할 수 있습니다. 대표적으로 홈페이지의 메인 컬러들을 변수에 부여해서 사용합니다. 변수를 사용하기 때문에 색깔 등 스타일에 변화가 있을때 변수에 대한 값만 재할당하면 홈페이지의 모든 스타일을 한번에 바꿀 수 있습니다. - Nesting : 깔끔한 코드
Sass는 유용한 확장기능인 Nesting을 사용해서 선언을 중첩(nesting)으로 할 수 있습니다. 그래서 CSS와 같이 후손 셀렉터를 작성할 때 부모요소를 기술하지 않고, 들여쓰기로 간단하게 작성할 수 있습니다. 가상 클래스 선택자와 같이 부모 요소의 참조가 필요한 경우 &를 사용하고, 지정하는 부모 요소의 참조가 필요합니다. 너무 깊은 Nesting은 가독성을 나쁘게하고 셀렉터를 복잡하게 만들기 때문에 주의해야 합니다. - Mixins, Extends : 반복작업 더 줄이기
Sass의 Mixins는 함수를 사용하는 것과 같습니다. 받은 매개변수로 color나 border의 사이즈를 지정할 수 있습니다. Extends는 특정한 속성을 가져와서 다른 선택자에서도 동일한 속성을 쓰도록 만들어주는 기능입니다. 한개의 클래스에 대한 스타일이 이미 작업되어 있을때, 다른 곳에서도 이 스타일을 동일하게 가져다 쓸 수 있습니다. 이 두개의 기능은 CSS로 작업할때 반복하는 것을 대폭적으로 줄입니다.
Sass Scss
Sass의 3버전에서 새롭게 등장한 SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합입니다.
둘의 큰 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.
아래 예제를 보면 더 쉽게 이해할 수 있습니다.
// Sass.container
width: 500px
height: 300px
h2
color: blue
font-size: 32px// SCSS.container{
width: 500px;
height: 300px;
h2{
color: blue;
font-size: 32px
}
}
vsCode에서 Sass 바로 시작하기
Sass(SCSS)는 웹에서 직접 동작할 수 없습니다. 최종에는 표준 CSS로 동작해야 하기때문에 전처리기로 작성 후 CSS로 컴파일해서 사용해야 합니다.
다양한 방법중에 가장 간하게 vsCode에서 사용하는 방법은 다음과 같습니다.
확장프로그램 설치
vsCode에서 아래 보이는 두개의 확장프로그램을 설치합니다.
확장프로그램이 정상적으로 설치되면 하단에 Watch Sass 버튼이 생성된 것을 확인할 수 있습니다.
버튼을 클릭하면 아이콘이 아래와 같이 변합니다. Watching으로 버튼의 글자가 변경됩니다. 이 상태에서 Sass(SCSS)파일을 저장하면 컴파일이 진행되고, 버튼의 위치에 Success, Error로 컴파일 성공 여부를 알려줍니다.
컴파일이 성공한 경우 Sass(SCSS) 파일과 동일한 위치에 CSS파일이 생성됩니다. HTML파일에서 이 CSS파일을 호출해서 사용하면 됩니다.
생성되는 CSS파일의 위치는 vsCode의 설정에서 변경 가능합니다.
연습
Sass를 시작하기 위해서 pinterest에서 적당한 디자인을 참고해서 만들었습니다.
구현한 페이지는 아래와 같습니다.
위 페이지의 모든 소스는 Git에서 확인 가능합니다.
개발후기
Sass를 사용하는데 많은 어려움이 있지는 않았지만, 위에 설명한 Sass(SCSS)의 장점들을 많이 활용하지 못하는 느낌을 받았습니다. Sass의 용어에 익숙하지 않아서 더 효율적으로 사용하지 못했고, 기존과는 조금 다른 문법을 사용하는데 더 집중해서 많은 응용을 하지 못했습니다.
Sass 코드를 작성중에 가장 편리하게 느낀 점은 들여쓰기를 사용해서 하위 태그들을 선택자로 지정하는 Nesting입니다. 작성한 홈페이지가 원페이지 형태로, 각 세션별로의 스타일이 분명한 디자인이라서 태그는 중복되더라도 스타일이 중복되는 경우가 거의 없었습니다. 그래서 들여쓰기를 사용해서 스타일을 지정할 때 많은 편리함이 있었습니다. 하지만 공통적으로 적용되는 스타일이 많은 서브페이지에서는 들여쓰기를 이용하기 보다는 클래스나 아이디를 부여하고, Mixins, Extends를 활용해서 작업하는게 더 편리할 것 같습니다.
Sass가 가진 고유한 문법과 기능은 추가로 공부해서, 서브 페이지들에 적용시켜 나갈 계획입니다.
참고
