하드코딩하는사람들 상서님의 Less 발표자료 입니다.

1. The Dynamic Style sheet
Language

2. Css Preprocessor
확장된 문법으로 CSS 작성을 편리하게 해준다.
css-tricks에서 2012년 6월 실시한 조사에 의하면 46%의
사람들이 CSS Preprocessor를 경험하지 않았다.
http://css-tricks.com/poll-results-popularity-of-css-preprocessors

3. Css Preprocessor
제공하는 기능은 대부분 비슷함.
(비교: http://csspre.com)

4. Less History
• Alexis Sellier에 의해 2009년에 오픈 소스로 설계된
동적 스타일 시트 언어입니다.
• Less는 처음 Ruby로 제작 되었고 그 다음 버전 부터
Javascript로 대체 되었습니다.
• 2012년5월 Alexis Sellier는 less에 대한
확장 및 관리에 대한 부분을 core team(핵심 참여자)에
양도 하였고 현재 core team(핵심 참여자) 에서
관리 유지하고 있습니다.

5. Less
LESS는 CSS의 모든 것을 포함한다.
모든 CSS코드를 LESS에서 사용할 수 있고
LESS는 CSS에 없는 다른 문법을 가지고 있다.
이미 만들어져 있는 CSS코드들도
LESS코드로 사용할 수 있다.

6. Less Language Features
• Comment (주석)
• nested rules (코드 중첩)
• parents selectors (상위 선택자)
• Variables (변수)
• Operations (연산)
• Functions (함수)
• unit
• percentage
• Mixins (믹스인)
• Not outputting the mixin
• media query bubbling and nested media
(미디어쿼리 중첩)
• @import

7. Comment(주석)

8. Comment(주석)

9. nested rules(코드 중첩)

10. nested rules(코드 중첩)

11. parents selectors(상위선택자)

12. parents selectors(상위선택자)

13. Variables(변수)

14. Variables(변수)

15. Operations(연산)

16. Operations(연산)

17. Functions(함수)- unit, percentage

18. Functions(함수)- unit, percentage

19. Mixins(믹스인)

20. Mixins(믹스인)

21. Not outputting the mixin

22. Not outputting the mixin

23. media query bubbling and
nested media(미디어쿼리 중첩)

24. media query bubbling and
nested media(미디어쿼리 중첩)

25. @import

26. @import

27. How To Use LESS
 Using The LESS Javascript File
 <script src="less.js“ type="text/javascript"></script>
 <link rel="stylesheet/less" type="text/css" href="style.less">
 GUIs for Less
 Crunch
 Mixture
 SimpLESS
 Koala
 Specific platforms
 Prepros App (Windows, Osx, Linux)
 WinLess (Windows)
 CodeKit (OSx)
 Plessc (Linux)

28. How To Use LESS
 Online Less Compilers
 less2css.org
 winless.org/online-less-compiler
 lesstester.com
 dopefly.com/less-converter
 leafo.net/lessphp/editor
 Precess
 Node.js compilers
 grunt-contrib-less
 assemble-less
 gulp-less
 Autoless
 Connect Middleware for Less.js

29. How To Use LESS
 Online Web IDEs/Playgrounds with Less support
 CSSDeck Labs
 CodePen
 Fiddle Salad
 JS Bin
 jsFiddle
 Editors and Plugins
 Sublime Text 2 & 3
 Eclipse
 Visual Studio
 Dreamweaver
 Notepad++ 6.x

30. 공식 사이트 : http://lesscss.org
자료 출처1 : http://nolboo.github.io
자료 출처2 : http://codeflow.co.kr/
참고 사이트 : http://opentutorials.org/

31. Thanks