Less --> css 변환 도구에 대하여 > 자유게시판

자유게시판

Less --> css 변환 도구에 대하여 정보

Less --> css 변환 도구에 대하여

본문

Less 에 대하여 Client 쪽을 알아 봤습니다.

Client 단을 찾아 본 사유는
가급적 운영중인 서버에 최대한 부담을 주지 않은것이 저의 기준이라
( 다이렉트로 개발하는것도 마찮가지구요 )

툴들을 알아 봤습니다.

결론부터 말씀 드리면
클라이언트단에서 개발툴이 따로 있는 상태는 아니고
메모장 같은곳에서 개발을 따로 해야 하는 상황이였습니다.

1) Eclipse 의 Aptana Studio 에서는 칼라까지 지원 한다는데 해보지 않았습니다.
2) SimpLESS : 한번 설정해 놓으면 less 소스 변경시 자동으로 변환해 주더군요.
                       단점은 에러 발생시 묵묵무답
3)  Crunch : 에러가 발생하면 에러 발생 위치의 라인까지 표현해 주더군요.
                    바로 수정도 가능해서 처음 개발 단계에서는 이것을 선택하는게 가장 좋을것 같습니다. 

참고로 위의 2, 3 번은 mini 까지 지원 하고 사용법도 무지 간단했습니다.

오로지 less 에 대한 문법만 공부하면 되는데,
이것도 이젠 하나의 작은 언어(?)로 자리 잡을것 같은 느낌이였습니다.

더 좋은 툴이 있다면 추천 부탁 드리겠습니다.

추천
0
  • 복사

댓글 11개

CSS를 호출할 때마다 LESS 를 컴파일하는 게 아니어서 서버 단에서 쓰시더라도 무리가 없지 않을까 싶은데요.
LESS 를 한 2주 정도 써보니 이거 잘못 쓰면 가독성이 너무 떨어져서 안 좋네요. 특히 nesting 같은 경우가 그런데 눈이 뱅글뱅글 돌아갑니다. @@ 개발자 분들은 오히려 더 편하실지도 모르겠지만... ^^;;
그래도 mixin 이나 function 은 쓰기 편하고 좋은 것 같네요.
예에...그렇기는 한대요...

처음 개발시에만 css 가 자주 변할테니 이때만 Client 단에서 해주면 될것 같아서요.

제가 민감해서 그럴수도 있지만
서버에서 php 로 하던 뭘로 하던 less 을 css 로 만드는 툴이나 프로그램이
서버 메모리와 cpu 사용을 할것이라 이것 저것 다른 프로그램들을 합치면,
프로세서가 너무 많이 돌더라구요..

그래서
오늘 한시간동안 툴들을 뒤져 보다가
Client 단들을 해 보고 올렸습니다.

위의 본글 2) 번은 css 가 수정이 되면 프로그램이 알아서 css 을 생성해주니
사이트 완료후 페이지 수정이나 추가 사항이 생기면
바로 바로 같이 올리면 되겠더라구요.

less 는 이제 공부 시작이라 아직 전혀 몰라요...ㅠㅠ
경험하신 말씀 감사해요...말씀해 주신거 뒤져 보겠습니다...(ㅡㅡ)(_ _)
이건 저도 궁금한 건데요. 클라이언트에서 컴파일하면 예전에 자주 문제 됐었던 FOUC 혹은 정말 운 나쁘게 자바스크립트를 사용하지 않는다던지 하는 경우를 만날 수 있지 않을까요? ^^;;
예에..그럴수도 있지요..ㅠㅠ

FOUC 라는 용어
저는 처음 알아서 위키에 둘러보니, 정의가 잘되어 있었네요..ㅠㅠ..하나 배웠습니다..(ㅡㅡ)(_ _)
( http://ko.wikipedia.org/wiki/FOUC )

의도하신 내용을 제가 제대로 이해한건지 모르겠지만
이번에 less 공부하려는 사유가 반응형 때문에요..

개발시에만 사용하고 그 다음에는 옵션이라고 생각하고,
화면 구조별 위치 문제로 골머리를 썩으니

처음 개발시에 less 로 화면 꾸며 놓고
script 로 제어하려는 부분은 그 다음에 보자!

이런 생각으로 출발하면 less 로 만든게
script 로 화면 제어할때 좀더 낳지 않을까라는 생각이 들더라구요.

아직 less 적용은 둘째치고 이제 시작이라
적용 해보고 말씀하신 내용이 무엇인지 파악 할 수 있를것 같습니다...ㅠㅠ
저도 LESS 로 현재 냑 반응형 작업 중이라 더 관심이 가네요. 저는 기존에 이미 있던 코드들을 다뤄서 그런지 아직 LESS 의 이익을 크게 보고 있지는 않은 것 같아요. 어쩌면 이익을 모르고 있는 걸지도 모르겠지만 ^^;;
암튼 안정성면에서는 서버 측이 더 낫겠다는 생각이 들어서 한마디 거들어봤습니다. 불타는 코딩하세요! ^^
http://lesscss.org/#usage 에서 Server-side usage 그대로 사용하고 있어요.
$ lessc style.less > style.css -x
이런 식으로 minify 시켜서요.
LESS도 잘 사용하면 좋은 도구가 되지만,
작은 유닛에서 무리하게 도입할 필요는 없을듯합니다.(단 유닛 복잡도나 컬러셋등 공통 참조가 많을경우에는 예외)
© SIRSOFT
현재 페이지 제일 처음으로