CSS프리프로세서

Css 프리프로세서란?

•  CSS를 변수나 Nested Rules을 이용하여 쉽고 빠르고 체계적으로 프로그래밍 할 수 있게 만든 것
• 프리프로세서의 종류 > sass, less, stylus콜론( : ), 세미콜론( ; ) 을 생략할 수 있다.
• - Sass는 .scss, LESS는 .less, stylus는 .styl 확장자를 사용한다.
• - Sass와 LESS는 모두 표준 CSS 구문을 사용하고 Stylus는 표준 CSS구문을 허용하지만 중괄호( {} ) 

Sass (Syntacticall awesome style sheet)

 = 구문적으로 꽤 괜찮은 스타일시트

 

사전적 정의 - css 상위에 있는 meta - language 로 CSS에 비해 간결하고 격식을 갖춘 css문법을 제공

스타일시트를 쉽게 관리할 수 있는 기능을 제공하는 것.

 

>> 반복되는 코드를 한번의 선언으로 여러 곳에서 재 사용 할 수 있도록 해주는 등의 편리 기능 (LESS도 마찬가지)

 

Less

자바스크립트 문법을 취하고 있음, Node.js엔진을 기반으로 구동

 

사스와 다른점?

>> 브라우저단에서도 동작함.

>> Sass와는 달리 Less의 정보가 상대적으로 적은 편

>> 트위터 부트스트랩 이 less를 사용 후 Less의 인기도 상승

 

CSS에 비해서?

• 알기쉬운 코드CSS에는 출력되지 않는 코맨트를 사용해서 내부적인 코맨트를 남겨둘수 있다.
• 코드분석이 쉽고, 구조나 모듈의 단위가 알기 쉽다.
• 유지보수의 편의사전에 변경이 예측되는 곳에는 변수를 사용함
• 호출 당하는 곳의 코드만 변경하는 것 만으로 유지보수
• 코딩 작업의 스피드업스타일을 컴포넌트화해서 다수의 안건에서 반복 사용이 가능하다.
• 동일한 스타일을 반복 작성할 필요가 없으므로 작성하는 코드의 양이 줄어든다.
• 표시 속도의 개선-:nested(중첩 스타일은 Sass의 기본 출력 스타일)-:compact(축약 스타일은 중첩 스타일이나 확장 스타일보다 공간을 덜 차지)
• -:compressed(압축 스타일은 최소한의 공간을 차지하도록 압축한 형태)
• -:expanded(확장 스타일은 사람이 작성한 CSS 스타일과 거의 같다)
• CSS를 압축할 수 있어서 파일사이즈를 줄일 수 있다.
• CSS를 하나로 만들수 있으므로 HTTP리퀘스트를 줄일수 있다.
• CSS Sprites도 간단하게 할 수 있어서 이미지의 리퀘스트 수도 줄일 수 있다.

 

사용이 적합한 환경

다음과 같은 환경에서 CSS프리프로세서를 도입하게 되면 그 위력을 발휘할 수 있게 될 것이다.

 

• 다수의 맴버가 동시에 작업을 진행하는 경우나중에 수정을 하게 되는 경우에도 한 곳이 수정되면 모든 곳이 수정되어 반영된다.
• 파일을 분할해서 작업하여 하나의 CSS로 합치기 때문에 동시 진행으로 작업을 해도 충돌(conflict)발생을 줄일 수 있다.(variable.css, common.css, style.css 추가적으로 custom.css)
• mixin을 호출하는 작업을 하는 것이라서 전원이 작업하는 코드를 통일 화 할 수 있다.
• 같은 제작 팀에서 CSS 초보자가 있을 경우라 해도 소스코드는 간단하여 알기 쉽다.IE대응을 위한 CSS핵을 mixin에 넣어두면 대응 법을 모르더라도 자연스럽게 대응할 수 있다.
  CSS프리프로세서를 프로젝트를 사용하며 느낀점
• 작성 실수가 있을 경우라 하더라도 에러를 알려주기 때문에 디버그가 용이해 진다.
• .btn-brown, btn-black 등등 버튼의 스타일 속성을 정의한 클레스명을 믹스인으로 대체하여 마크업 네이밍을 구체적으로 표시 
• 화면의 body마다 그페이지에 맞는 클레스를 주어 mix-in 기능을 사용하여 썻더라도 개별적인 수정이 용이해짐.
• 스타일작업의 속도 향상
• 수정사항이 있을때의 대응이 CSS에 비해 크게 용이해짐.