Less --> css 변환 도구에 대하여
Less 에 대하여 Client 쪽을 알아 봤습니다.
Client 단을 찾아 본 사유는
가급적 운영중인 서버에 최대한 부담을 주지 않은것이 저의 기준이라
( 다이렉트로 개발하는것도 마찮가지구요 )
툴들을 알아 봤습니다.
결론부터 말씀 드리면
클라이언트단에서 개발툴이 따로 있는 상태는 아니고
메모장 같은곳에서 개발을 따로 해야 하는 상황이였습니다.
1) Eclipse 의 Aptana Studio 에서는 칼라까지 지원 한다는데 해보지 않았습니다.
2) SimpLESS : 한번 설정해 놓으면 less 소스 변경시 자동으로 변환해 주더군요.
단점은 에러 발생시 묵묵무답
3) Crunch : 에러가 발생하면 에러 발생 위치의 라인까지 표현해 주더군요.
바로 수정도 가능해서 처음 개발 단계에서는 이것을 선택하는게 가장 좋을것 같습니다.
참고로 위의 2, 3 번은 mini 까지 지원 하고 사용법도 무지 간단했습니다.
오로지 less 에 대한 문법만 공부하면 되는데,
이것도 이젠 하나의 작은 언어(?)로 자리 잡을것 같은 느낌이였습니다.
더 좋은 툴이 있다면 추천 부탁 드리겠습니다.
댓글 11개
12년 전
CSS를 호출할 때마다 LESS 를 컴파일하는 게 아니어서 서버 단에서 쓰시더라도 무리가 없지 않을까 싶은데요.
LESS 를 한 2주 정도 써보니 이거 잘못 쓰면 가독성이 너무 떨어져서 안 좋네요. 특히 nesting 같은 경우가 그런데 눈이 뱅글뱅글 돌아갑니다. @@ 개발자 분들은 오히려 더 편하실지도 모르겠지만... ^^;;
그래도 mixin 이나 function 은 쓰기 편하고 좋은 것 같네요.
LESS 를 한 2주 정도 써보니 이거 잘못 쓰면 가독성이 너무 떨어져서 안 좋네요. 특히 nesting 같은 경우가 그런데 눈이 뱅글뱅글 돌아갑니다. @@ 개발자 분들은 오히려 더 편하실지도 모르겠지만... ^^;;
그래도 mixin 이나 function 은 쓰기 편하고 좋은 것 같네요.
12년 전
예에...그렇기는 한대요...
처음 개발시에만 css 가 자주 변할테니 이때만 Client 단에서 해주면 될것 같아서요.
제가 민감해서 그럴수도 있지만
서버에서 php 로 하던 뭘로 하던 less 을 css 로 만드는 툴이나 프로그램이
서버 메모리와 cpu 사용을 할것이라 이것 저것 다른 프로그램들을 합치면,
프로세서가 너무 많이 돌더라구요..
그래서
오늘 한시간동안 툴들을 뒤져 보다가
Client 단들을 해 보고 올렸습니다.
위의 본글 2) 번은 css 가 수정이 되면 프로그램이 알아서 css 을 생성해주니
사이트 완료후 페이지 수정이나 추가 사항이 생기면
바로 바로 같이 올리면 되겠더라구요.
less 는 이제 공부 시작이라 아직 전혀 몰라요...ㅠㅠ
경험하신 말씀 감사해요...말씀해 주신거 뒤져 보겠습니다...(ㅡㅡ)(_ _)
처음 개발시에만 css 가 자주 변할테니 이때만 Client 단에서 해주면 될것 같아서요.
제가 민감해서 그럴수도 있지만
서버에서 php 로 하던 뭘로 하던 less 을 css 로 만드는 툴이나 프로그램이
서버 메모리와 cpu 사용을 할것이라 이것 저것 다른 프로그램들을 합치면,
프로세서가 너무 많이 돌더라구요..
그래서
오늘 한시간동안 툴들을 뒤져 보다가
Client 단들을 해 보고 올렸습니다.
위의 본글 2) 번은 css 가 수정이 되면 프로그램이 알아서 css 을 생성해주니
사이트 완료후 페이지 수정이나 추가 사항이 생기면
바로 바로 같이 올리면 되겠더라구요.
less 는 이제 공부 시작이라 아직 전혀 몰라요...ㅠㅠ
경험하신 말씀 감사해요...말씀해 주신거 뒤져 보겠습니다...(ㅡㅡ)(_ _)
12년 전
이건 저도 궁금한 건데요. 클라이언트에서 컴파일하면 예전에 자주 문제 됐었던 FOUC 혹은 정말 운 나쁘게 자바스크립트를 사용하지 않는다던지 하는 경우를 만날 수 있지 않을까요? ^^;;
12년 전
예에..그럴수도 있지요..ㅠㅠ
FOUC 라는 용어
저는 처음 알아서 위키에 둘러보니, 정의가 잘되어 있었네요..ㅠㅠ..하나 배웠습니다..(ㅡㅡ)(_ _)
( http://ko.wikipedia.org/wiki/FOUC )
의도하신 내용을 제가 제대로 이해한건지 모르겠지만
이번에 less 공부하려는 사유가 반응형 때문에요..
개발시에만 사용하고 그 다음에는 옵션이라고 생각하고,
화면 구조별 위치 문제로 골머리를 썩으니
처음 개발시에 less 로 화면 꾸며 놓고
script 로 제어하려는 부분은 그 다음에 보자!
이런 생각으로 출발하면 less 로 만든게
script 로 화면 제어할때 좀더 낳지 않을까라는 생각이 들더라구요.
아직 less 적용은 둘째치고 이제 시작이라
적용 해보고 말씀하신 내용이 무엇인지 파악 할 수 있를것 같습니다...ㅠㅠ
FOUC 라는 용어
저는 처음 알아서 위키에 둘러보니, 정의가 잘되어 있었네요..ㅠㅠ..하나 배웠습니다..(ㅡㅡ)(_ _)
( http://ko.wikipedia.org/wiki/FOUC )
의도하신 내용을 제가 제대로 이해한건지 모르겠지만
이번에 less 공부하려는 사유가 반응형 때문에요..
개발시에만 사용하고 그 다음에는 옵션이라고 생각하고,
화면 구조별 위치 문제로 골머리를 썩으니
처음 개발시에 less 로 화면 꾸며 놓고
script 로 제어하려는 부분은 그 다음에 보자!
이런 생각으로 출발하면 less 로 만든게
script 로 화면 제어할때 좀더 낳지 않을까라는 생각이 들더라구요.
아직 less 적용은 둘째치고 이제 시작이라
적용 해보고 말씀하신 내용이 무엇인지 파악 할 수 있를것 같습니다...ㅠㅠ
12년 전
저도 LESS 로 현재 냑 반응형 작업 중이라 더 관심이 가네요. 저는 기존에 이미 있던 코드들을 다뤄서 그런지 아직 LESS 의 이익을 크게 보고 있지는 않은 것 같아요. 어쩌면 이익을 모르고 있는 걸지도 모르겠지만 ^^;;
암튼 안정성면에서는 서버 측이 더 낫겠다는 생각이 들어서 한마디 거들어봤습니다. 불타는 코딩하세요! ^^
암튼 안정성면에서는 서버 측이 더 낫겠다는 생각이 들어서 한마디 거들어봤습니다. 불타는 코딩하세요! ^^
12년 전
서버측은 무엇으로 설정해서 사용하시는지 여쭤봐도 될까요?
12년 전
http://lesscss.org/#usage 에서 Server-side usage 그대로 사용하고 있어요.
$ lessc style.less > style.css -x
이런 식으로 minify 시켜서요.
$ lessc style.less > style.css -x
이런 식으로 minify 시켜서요.
12년 전
아.....설치하고서 하는 shell 에서 하는 방식...
서버쪽 보다가 후잉~~~했어요...
답변 주셔서 감사합니다..(ㅡㅡ)(__)
서버쪽 보다가 후잉~~~했어요...
답변 주셔서 감사합니다..(ㅡㅡ)(__)
THIRD
12년 전
저도 크런치(Crunch) 사용합니다 ㄷ
THIRD
12년 전
LESS도 잘 사용하면 좋은 도구가 되지만,
작은 유닛에서 무리하게 도입할 필요는 없을듯합니다.(단 유닛 복잡도나 컬러셋등 공통 참조가 많을경우에는 예외)
작은 유닛에서 무리하게 도입할 필요는 없을듯합니다.(단 유닛 복잡도나 컬러셋등 공통 참조가 많을경우에는 예외)
12년 전
귀중한 경험 말씀해 주셔서 감사합니다..(ㅡㅡ)(_ _)
게시글 목록
| 번호 | 제목 |
|---|---|
| 18790 |
JavaScript
공백제거
|
| 18788 |
PHP
셀렉트박스 간편하게 만들기
1
|
| 18786 | |
| 18783 |
PHP
게시판의 페이징 방법
2
|
| 18780 |
PHP
이미지에 워터마크 처리하기
2
|
| 18769 |
Mobile
Chrome 를 이용한 모바일모드
10
|
| 5549 | |
| 27272 | |
| 27267 | |
| 30785 | |
| 30782 | |
| 27264 | |
| 18767 |
JavaScript
스크립트오류 제거
1
|
| 18765 |
JavaScript
간단한 쿠키지원 팝업 스크립트
1
|
| 18764 | |
| 18763 |
JavaScript
대소문자변환
|
| 5546 | |
| 18760 | |
| 18758 | |
| 18755 |
JavaScript
홈페이지 브라우저 크기 고정시키기
2
|
| 18752 |
JavaScript
iframe 아이프레임 투명처리
2
|
| 27256 | |
| 27247 | |
| 5539 | |
| 18750 | |
| 27244 | |
| 27243 | |
| 18749 |
JavaScript
금액 입력시 자동으로 천단위구분기호(,) 붙여주는 함수
|
| 18747 | |
| 18745 |
JavaScript
출생년도에 따른 나이 계산 자바스크립트
1
|
| 18741 | |
| 18740 | |
| 18738 |
JavaScript
iframe에서 페이지를 닫을 때
1
|
| 18731 |
JavaScript
iframe 높이 자동조절 스크립트
6
|
| 18730 |
JavaScript
자바스크립트 인공지능 장기게임-Minimax
|
| 27240 | |
| 5535 | |
| 18728 |
JavaScript
금액을 한글로 표기 해주는 스크립트;
1
|
| 18726 |
JavaScript
전화번호 입력시 자동 하이픈 넣기
1
|
| 18724 |
JavaScript
사업자번호체크스크립트 간단버전
1
|
| 5532 | |
| 26500 |
견적서
홈페이지 제작 견적서
14
|
| 27237 | |
| 5529 | |
| 30776 | |
| 18721 |
jQuery
플러그인 만들기 간단 예제
2
|
| 20725 | |
| 27232 | |
| 18719 |
JavaScript
퀵메뉴
1
|
| 18717 | |
| 18714 |
JavaScript
입력박스안에 왠 아이콘?
2
|
| 18712 |
JavaScript
게시판 글작성시 일부 태그막기
1
|
| 18709 |
jQuery
랜덤한 레이아웃과 효과
2
|
| 27213 | |
| 27200 | |
| 18706 |
JavaScript
자동으로 textarea 크기 조절하기
2
|
| 18704 |
JavaScript
textarea 자동 늘려주기 2
1
|
| 18702 |
JavaScript
해당 브라우저에 지원하는 이벤트 확인
1
|
| 18701 |
JavaScript
자바스크립트로 논리적인 XOR 연산하기.
|
| 18700 |
JavaScript
동적 셀렉트박스 다루기.
|
| 18698 |
JavaScript
자바스크립트 이벤트 핸들러 (Event Handler)
1
|
| 18697 |
JavaScript
함수명을 변수로 해야할 때
|
| 18696 |
JavaScript
이메일 유효성 정규식 - 자바스크립트
|
| 18694 | |
| 5525 | |
| 27199 | |
| 18691 | |
| 5515 | |
| 5510 | |
| 5501 | |
| 18690 | |
| 18687 | |
| 5496 | |
| 18686 | |
| 18676 | |
| 26496 |
서식
영수증 양식
3
|
| 18675 | |
| 30773 | |
| 18671 |
JavaScript
이미지 슬라이드 관련입니다.(자바,제이쿼리)
3
|
| 30767 | |
| 18667 |
JavaScript
롤오버시 서브메뉴가 나타나는 기본 스크립트
3
|
| 18658 |
jQuery
회사에 히스토리에 써먹을 만한 자료
8
|
| 18650 | |
| 18648 |
MySQL
고수님들 도와주세요!
1
|
| 5494 | |
| 5490 | |
| 20705 | |
| 5485 | |
| 18645 |
Mobile
json 파싱방법
2
|
| 27194 | |
| 20684 |
정규표현식
정규표현식 의 핵심. 패턴변경자 1
20
|
| 18642 | |
| 5482 | |
| 27185 | |
| 5478 | |
| 5473 | |
| 5467 | |
| 18636 | |
| 5462 | |
| 5443 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기