The LESS 기초 : The Dynamic Styleshee Language Basic
31
The Dynamic Style sheet Language
-
Upload
jeong-seok-yang -
Category
Education
-
view
891 -
download
2
Transcript of The LESS 기초 : The Dynamic Styleshee Language Basic
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
Less History
• Alexis Sellier에 의해 2009년에 오픈 소스로 설계된동적 스타일 시트 언어입니다.
• Less는 처음 Ruby로 제작 되었고 그 다음 버전 부터Javascript로 대체 되었습니다.
• 2012년5월 Alexis Sellier는 less에 대한확장 및 관리에 대한 부분을 core team(핵심 참여자)에양도 하였고 현재 core team(핵심 참여자) 에서관리 유지하고 있습니다.
LESS는 CSS의 모든 것을 포함한다.
Less
모든 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
Comment(주석)
Comment(주석)
nested rules(코드 중첩)
nested rules(코드 중첩)
parents selectors(상위선택자)
parents selectors(상위선택자)
Variables(변수)
Variables(변수)
Operations(연산)
Operations(연산)
Functions(함수)- unit, percentage
Functions(함수)- unit, percentage
Mixins(믹스인)
Mixins(믹스인)
Not outputting the mixin
Not outputting the mixin
media query bubbling and
nested media(미디어쿼리 중첩)
media query bubbling and
nested media(미디어쿼리 중첩)
@import
@import
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)
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/
Thanks
