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