css 생산성을 높여주는 less, sass

게시자: 대문 demun 카테고리: 퍼블리셔/css 2012.11.01 09:00

css 를 사용하는데 좀더 편하고, 확장할 수 있는 방법이 less 나 sass 를 사용하는겁니다.

관련한 한글로 된 문서는 많이 없는데요. 제가 하나 하나 하면서 추가해볼까 합니다.


그럼 less, sass 이게 뭐냐?

css 의 전처리 도구라고 생각하면 됩니다. 아니 좀더 편하게 , 좀더 체계적으로 사용할 수 있게 하는 도구라고 생각하면 될듯 싶습니다.


less -> http://lesscss.org/

sass ->http://sass-lang.com/


몇가지 예를들면 이해가 가실겁니다.


왼쪽이 less 고 우측이 컴파일된 css 코드 입니다.



대략 설명하자면 @gray 에 #333 을 설정하고 p는 @gray 그대로 사용합니다.

그 바로 아래 a 는 p 안에 a 를 말합니다. 

color 은 @gray 를 밝은쪽으로 10% 해서 보여줍니다.


이런식으로 코드를 작성하면 보다 편리하고 체계적으로 관리가 가능하고, 또한 수정할때 관련 변수값만 바꿔주면 된다는 이야기입니다.

윈도우와 맥 등에서 컴파일을 하는 도구가 있고 온라인 상에서 그냥 쉽게 변활 할 수도 있습니다.


예를들어 구글에서 less online compiler 를 검색하면 온라인상에서 쉽게 변활 할수 있는곳이 많이 나옵니다.

위의 화면은 http://winless.org/online-less-compiler 에서 변환한겁니다.

거꾸로 css 를 작성하면 less 로 변환하는 사이트도 있습니다.

http://css2less.cc/





윈도우 데스크탑에서 less 를 작성하면 css 로 변환하는 것중에서 추천할 만한것이 두개가 있습니다.

간단하게 끌어다놓기만하면 변환하는 http://wearekiss.com/simpless 또 직접 코딩하면서 변환된것을 보고 할 수 있는 Crunch -> http://crunchapp.net/ 입니다.


간단하게 변환해주는 simpless 는 동영상 사용법이 생활코딩에 있습니다.

또한 less , sass 에 대해서도 많은 참고글이 있으니 참고하시기 바랍니다.

http://opentutorials.org/course/277/1953


저는 요즘 주로 Crunch 를 사용합니다. 직접 코딩하면서 오류가 나면 오류난곳까지 잡아줘서 사용하기가 편리합니다.


less 가 뭔지 , 왜들 사용하는지에 대한 좋은 글이 있어 링크합니다. 

그냥 보기만 하면 이해가 가실겁니다.

http://www.slideshare.net/jeehoon/less-framework-by-yamoo9


tag , ,

댓글