Posted in 웹디자인

sass (scss)로 메뉴와 hover 기능 만들기

최근에 sass에 관심을 갖게 되면서 기존의 css를 어떤식으로 바꿔서 사용할 것인지 한 번 테스트를 해봤습니다. 현재 대부분 사람들이 사용하는 브라우저 상에서는 sass를 해석해서 보여주는 기능은 없습니다.  그래서 sass로 만든 문서는 css로 변환해주는 – 컴파일 과정이 필요합니다. sass는 로컬상에서 작성해서 css라는 결과물로 출력해줘야한다는 이야기입니다. 다만, sass로 css 출력물을 받아보면 체계적으로 잘 정리해서 내놓기때문에 별도로 손댈 것들이 없습니다.

그리고 sass 상에서 주석을 잘 달아놓으면, 나중에 쉽게 가져다 쓰기 좋습니다. 아직은 능숙하게 다룰 수 있는 수준이 아니어서 조잡한 수준으로 활용하고 있습니다만, mixin 기능이 무척 강력하다는걸 조금씩 인지하고 있습니다. mixin을 잘 활용하면 굳이 부트스트랩과 같은 무거운 프레임워크에 의존하지 않고, 다양한 디자인으로 만들어갈 수 있을 것 같아서 오히려 더 매력적으로 다가옵니다.

less를 주로 지원하던 부트스트랩이 차기 버전부터 sass를 지원하기 시작한걸 보면, sass가 얼마나 빠르게 성장하는지 알 수 있습니다. 당장 새롭게 공부해야한다는 점에서 sass가 오히려 처음에는 css보다 작성하는데 속도가 더디겠지만, 추후 관리 면에서는 css보다 훨씬 체계적이고 직관적으로 관리가 가능할 것 같습니다.

이미 여기저기에서 mixin을 서로 공유하는 프론트엔드 개발자들도 많은 걸 보니, 손쉽고 빠른 프론트엔드 개발을 위해서도 sass는 더더욱 중요하게 자리잡을 것 같습니다.

아래 예제는 각각 html과 SASS(scss)로 작성한 코드가 브라우저 상에서 어떻게 작동하는지 확인해볼 수 있는 간단한 예제입니다. header 상에 존재하는 상단 메뉴의 경우 이렇게 만들 수 있다라는 것을 보여주기 위해 작성한 코드입니다. 깔끔하지는 못하지만, css를 이미 알고 계실 경우에는 대충 어떤 구조인지 파악해볼 수 있을 겁니다.

 

 

0

Written by 코르니유

방황하는 일러스트레이터. 질풍노도의 웹/그래픽편집디자이너. 귀가가 귀찮아 외출도 귀찮은 스페셜 귀차니스트. 철부지들을 싫어하지만, 정작 본인은 철들기를 거부하는 30대 아저씨