CSS Preprocessor less
참고url 나만 모르는 이야기: http://jos39.tistory.com/185
우연이 3번 곂치면 필연이라고 하던데 웹관련해서 이런 저런 내용을 검색하는데 이 싸이트도 여러번 들어온거 같다. 쥔장이 조씨성을 갖고있는지 조쓰를 로고로 쓰고있다. ㅎㅎ 싸이트를 좀 둘러보니 싸이트 내용은 프블리셔쪽에 가까운 듯 싶다.
less 공식 싸이트 : http://lesscss.org/
less 사용예 : https://codemyviews.com/blog/10-less-css-examples-you-should-steal-for-your-projects
정리방법
less 공식 싸이트를 훓어 보니 less에 제어문도 보이는 것 같지만, 일반적인 제어문하고는 좀 거리가 있어보여 눈에 쏙 들어오지는 않는다. 개발자 입장에서 간단히 정리하자.
변수선언하는 방법과 내포규칙, 그리고 함수 형태를 사용하는 방법을 간략 정리하고 less를 적용하는 두가지 방법에 관해서 정리한다.
- 변수 선언
@를 이용해서 변수 선언하고 할당은 ':' 로 마무리는 세미콜론(;)
@baseFontFamily : 'Gulim','Dotum',sans-serif;
- 내포규칙
기존 CSS는 선택자가 중복되어 사용하지만 less에서는 상위 선택자 안에(Nest) 하위 선택자를 포함해서 선택자가 중복되지 않게 사용한다.
- 함수 사용예
함수 사용예는 코드 재사용성이 좋아 보인다. less 사용예 싸이트에 가면 좀 더 유용한 코드들이 많이 있다.
- less 적용
1. less.js를 link 하여 사용하는 방법
장점은 별도의 컴파일 과정 없이 less.js 만 적용하면 되기 때문에 쉽게 확인하고 반영하기 쉽지만 단점으론 IE8 버전은 지원하지 않고, 아무래도 js파일에서 css로 처리하기 때문에 속도에 영향을 받을 수 있다.
less.js는 공식싸이트에서 내려 받으면 된다.
테스트로 한번 해봤더니 떡하니 에러메세지도 보여준다.
주의할점은 less파일을 먼저 링크시키고 less.js파일을 연결해야 한다는 점이다.
아무래도 $(document).ready 펑션을 사용하는 이유와 유사하다. DOM문서가 완료된 시점에 랜더링 되어야 하기 때문이다.
console로 보면 less파일을 랜더링에 성공했고 css로 generate하는데 84ms가 걸렸고 총 85ms 가 걸렸다라는게 콘솔로 나온다.
2. 컴파일하기
less파일 컴파일은 simpLESS나 Crunch등이 있는데 SimpLESS를 이용해서 컴파일해 보겠다. 당연히 컴파일하면 css파일이 결과물로 나오겠죠?
한번 해보자
simpLESS 다운받기 : http://wearekiss.com/simpless
실행파일일 줄 알았는데 막상 받고보니 zip파일이고 압축을 풀어보니 SimpLESS.exe 실행파일과 아래 이미지 처럼 몇 개의 폴더로 구성되어있다. 라이센스정책 때문인지 일종의 프로젝트 자체를 올려 놓은듯 싶다.
그리고, less파일만 올리면 css로 변환해주는게 아닐까? 생각했는데 SimpLESS.exe를 실행해 보니 project 폴더를 올리라고 되어있다,
project 폴더를 올려보니 project폴더내에 있는 less파일을 검색해서 리스트를 보여주고 이걸 동일 폴더에 css로 generating 해주고 있다.
다시 좀 해보니 딱히 project폴더를 올릴 필요도 없고 less파일이 있는 폴더를 올리거나 그냥 less파일만 올려도 무방하다. 단지 화면 처럼 관련 파일이 아닌것 처럼 보이는데 이건 html의 Drag & Drop을 이용해서 그런거 같다. 이미지 파일이나 txt파일 같이 브라우저가 인식할 수 있는 파일이면 몰라도 폴더나 less파일을 올리면 관련파일이 아닌것 처럼 표시된다.
이렇게 Drag & Drop하면 아래 이미지 처럼 보이는데 refresh 버턴 처럼 보이는걸 클릭하면 css로 동일 폴더내에 생성해 준다.
[잡설]--------------------------------------------------------------------------------------
디자이너는 아니지만 삼성쪽 작업을 하면서 디자이너와 함께 Style 가이드를 받은적이 있다.
주요 내용은 색깔은 어떻게 써야하고, 어떨땐 이런 로고를 쓰고 저럴땐 저런 로고를 써야하며 font는 멀로하고 size는 어떻게 하라라는 내용인데 한마디로 모든 삼성싸이트는 일관성을 갖고있어야 한다는 것이었다.
아마도 CSS Preprocessor 는 이런 일관성을 체계적으로 관리하고자 나온게 아닐까? 하는 생각이 든다.
단순한 예를 한번 들어보자면 Top 메뉴 부분에 쓰이는 blue 칼라는 모든 버튼의 색깔과 동일해야 한다라고 생각해보자. css에 관련된 부분마다 blue 칼라를 넣어 주었는데 나중에 이를 변경하고자 한다면 일일이 하나 하나 변경하던지 좀 부담이 있지만 edit의 찾기를 통해서 일관변경하고 잘못 적용된 점이 있는지 없는지 확인하는 작업이 필요할 것이다.
이런 부분에 프로그램적 요소인 변수 개념을 도입하게 되면 변수에 설정된 색깔값만 바꿔 주면 된다라는 것이다.
less는 CSS에 프로그램적 요소를 가미하여 일관되고, 관리가 편한 CSS를 제공하는 것이다. 그렇다면 우리가 알고있는 프로그램은 컴파일과정이 있는데 less는 어떠할까?
less 역시 컴파일과정이 있다. less 작업을 하면 확장자를 .css가 아닌 .less로 만들어야 한다. 컴파일하는 방법은 두가지가 있는데
less.js 파일을 연결하여 동적으로 하는 방법과 컴파일하여 .css파일로 결과물을 만드는 방법이다. 아무래도 실무에서 사용한다 치면 개발시에는 less.js 파일을 이용하다가 어느정도 디자인이 안정화 단계에 들어서거나 막바지에는 css파일로 연결하는게 좋을 듯 싶다.
왜냐면. 개발시에 매번 컴파일하고 제대로 반영되었는지 확인하는 일은 정말 지칠일거 같고, less.js를 운영시에 않쓰는 이유는 아무래도 동적으로 인식 되는 부분이라 약간의 속도라도 느려지는건 어쩔수 없기 때문이다. 개발시는 개발 편의성, 배포시엔 속도가 맞겠다 싶다.
물런 말이 그렇다는 거지 개발자는 약간의 조언은 할 수 있겠지만 디자이너나 퍼블리셔가 하자는데로 맞춰주는게 좋다. 서로의 영역을 존중해 주는게 개발이 됐든 디자이너가 됐던 그일의 시작되는 자세라고 개인적으로 생각한다.