�ݺ�ߣ

The Dynamic Style sheet
Language

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

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

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

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

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

��ǳ��Գ�(주컮)

parents selectors(상위선택자)

�ղ��(볶�수)

��پ��ǲԲ�(연산)

Functions(함수)- unit, percentage

�Ѿ��澱�Բ�(믹스인)

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

How To Use LESS
 Using The LESS Javascript File
 <script src=/slideshow/the-less-the-dynamic-styleshee-language/42701307/"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)

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

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

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

�ݺ�ߣ

The LESS 기초 : The Dynamic Styleshee Language Basic

Recommended

More Related Content

What's hot (20)

Similar to The LESS 기초 : The Dynamic Styleshee Language Basic (20)

The LESS 기초 : The Dynamic Styleshee Language Basic