CSS(Cascading Style Sheet) 란
CSS(Cascading Style Sheet)는 마크업 언어(HTML, XML 등)가 실제 표시되는 방법을 기술하는 스타일 언어로
W3C(The World Wide Web Consortium) 에서 관리하는 표준이며
1996년 12월 17일 에 최초로 발표되었다.
버전은 2.1 까지 버전 2라고 부르고 이후 버전들을 3이라고 부른다. W3C를 보면 level로 관리하고 있다.
버전 2 이후부터는 CSS 구성요소별 level 을 두어 관리하고 있다.
강력한 그러나 까다로운
CSS는 굉장히 강력한데 https://csszengarden.com/ 사이트를 방문해 보면
동일한 내용의 HTML 을 CSS만 변경해서 8가지 (Mid Century Modern, Garments, Steel, Apothecary, Screen Filler, Fountain Kiss, A Robot Named Jimmy, Verde Moderna) 디자인으로 보여주고 있다.
그.러.나.
CSS는 다루기 또한 까다롭다.
인터넷을 돌아다니다보면 블라인드 커튼을 조작하는 GIF를 이용해 CSS 작업의 어려움을 표시한 이미지가 있다.
CSS 전처리기(CSS Pre-Processor)
일단 적용의 어려움은 둘째치고 작성도 용의 하지 않은데
CSS를 작성하다 보면 전체적으로 공용속성을 계속 반복해서 적는 단순행위를 반복해야 한다.
CSS는 프로그래밍 언어가 아니기 때문에 이런 불합리한 문제점이 생겼는데 이런 점을 개선하기 위해 탄생한 것이 CSS 전처리기이다.
CSS 전처리기는 전처리기의 자신만의 특별한 syntax(변수를 설정하고 상속을 받을 수도 있다.)를 가지고 CSS를 생성하도록 하는 프로그램이다.
이런 전처리기 중에서 유명한 2 가지는 LESS, SASS(SCSS) 이며 이 2가지는 서로 유사하다.
그러나 미국 정부의 전자문서 표준안에서 SASS가 체택되었고 LESS는 SASS보다 기능이 작기 때문에 최근 CSS 전처리기로는 SASS 가 더 유명하다.
둘 다 오픈소스인데 LESS(Leaner Style Sheets)는 Apache 2.0 라이선스이고 SASS(syntactically awesome style sheets)는 MIT 라이선스이다.
* 읽을 때는 SASS의 경우 "사스", "세스" 혹은 뒤에 "스크립트"를 붙여서 "사스 스크립트", "세스 스크립트" 라고 읽고 LESS의 경우 "레스", "레스 스크립트" 읽는다. 둘다 뒤에 css 를 붙여서 "~ CSS" 라고 읽는다.
CSS 전처리기 컴파일러
LESS, SASS 는 각각의 독특한 문법으로 CSS를 작성하게 되고 이것을 실제 적용하기 위해서는 css 파일로 변경해 주는 컴파일러가 필요한데 인터넷을 돌아다니다 보면 여러가지 CLI, GUI 컴파일러들이 있다.
이중에 LESS, SASS 모두 지원하는 컴파일러 2가지를 소개하자면
- 코알라 앱 koala app (http://koala-app.com/)
- 스카우트 앱(https://scout-app.io/)
둘 다 다양한 OS를 지원하며 실시간 컴파일 및 css compress 기능을 지원하고 있다.