Modern Web LESS Framework
ya
moo9@
naver.com
facebo
ok.com
/yamo
o9
ModernWeb LESSFramework
lesscss.org
Modern webLESS Framework
LESS 프레임워크란?
LESS FrameworkDynamic Stylesheet Language
CSSCascading Style Sheet
LESSCSS + Dynamic Language
LESS FrameworkDynamic Stylesheet Language
LESS란? CSS에 Script의 능력을 덧붙여 확장한 언어입니다.
The dynamic stylesheet language.LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
변수, 함수, 연산, 중첩, 스코프 등등
LESS FrameworkDynamic Stylesheet Language
LESS는 클라이언트 또는 서버 환경 모두에서 실행됩니다.
The dynamic stylesheet language.LESS runs on both the client-side (IE6+, Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
node.js
...<link rel="stylesheet/less" href="css/styles.less"><script src="js/less.js"></script>...
OverviewLESS Framework
LESS 간단하게 미리보기!
// LESS@lightCyan: #73cbdc;
#container { color: @lightCyan;}
#footer h2 { color: @lightCyan;}
// 변경된 CSS#container { color: #73cbdc;}
#footer h2 { color: #73cbdc;}
VariablesLESS Overview
@variablesLESS����������� ������������������ 변수는����������� ������������������ 앞에����������� ������������������ @를����������� ������������������ 붙여서����������� ������������������ 표기합니다.
// LESS.coner-round(@radius: 5px) {! -webkit-border-radius: @radius;! -moz-border-radius: @radius;! border-radius: @radius;}
.round {! .coner-round;}.rounder {! .coner-round(10px);}
MixinsLESS Overview
@parameter믹스인은����������� ������������������ 클래스����������� ������������������ 이름����������� ������������������ 형식으로����������� ������������������ 선언되며����������� ������������������
(����������� ������������������ )����������� ������������������ 안에����������� ������������������ 전달인자를����������� ������������������ 받을����������� ������������������ 수����������� ������������������ 있습니다.
// 변경된 CSS.round {! -webkit-border-radius: 5px;! -moz-border-radius: 5px;! border-radius: 5px;}
.rounder {! -webkit-border-radius: 10px;! -moz-border-radius: 10px;! border-radius: 10px;}
MixinsLESS Overview
// LESS#contents {! h2 {! ! font-size: 24px;! ! font-weight: normal;! }! p { ! ! font-size: 12px;! ! a { text-decoration: none;! ! ! &:hover { color: #73cbdc; }! ! }! }}
Nested RulesLESS Overview
Nested����������� ������������������ RulesLESS����������� ������������������ 중첩����������� ������������������ 작성규칙은����������� ������������������ 긴����������� ������������������ 이름을����������� ������������������ 중복해서
작성하지����������� ������������������ 않아도����������� ������������������ 되기����������� ������������������ 때문에����������� ������������������ 효율적입니다.
// 변경된 CSS#contents h2 { font-size: 24px; font-weight: normal; }#contents p { font-size: 12px; }#contents p a { text-decoration: none;}#contents p a:hover { color: #73cbdc;}
Nested RulesLESS Overview
// LESS@base-font-size: 12px;@base-font-color: #2e2d2c;
body {! font: @base-font-size/1.5 "나눔 고딕";! color: @base-font-color;}
.article { ! font-size: @base-font-size * 1.2;! border: 1px solid (@base-font-color + #909090);}
OperationLESS Overview
OperationLESS����������� ������������������ 에서는����������� ������������������ 사칙연산이����������� ������������������ 가능합니다.
크기����������� ������������������ 및����������� ������������������ 색상과����������� ������������������ 관련한����������� ������������������ 속성에����������� ������������������ 적용가능합니다.
// 변경된 CSSbody {! font: 12px/1.5 "나눔 고딕";! color: #2e2d2c;}
.article { ! font-size: 14.4px;! border: 1px solid #bebdbc;}
Nested RulesLESS Overview
// LESS@base-font-size: 12px;@base-font-color: #2e2d2c;
body {! font: @base-font-size/1.5 "나눔 고딕";! color: @base-font-color;}
.article { ! font-size: @base-font-size * 1.2;! border: 1px solid lighten(@base-font-color, 15%);}
FunctionLESS Overview
FunctionLESS����������� ������������������ 에서는����������� ������������������ 함수를����������� ������������������ 사용하여����������� ������������������
값을����������� ������������������ 손쉽게����������� ������������������ 변경����������� ������������������ 가능합니다.
// 변경된 CSSbody {! font: 12px/1.5 "나눔 고딕";! color: #2e2d2c;}
.article { ! font-size: 14.4px;! border: 1px solid #545454;}
FunctionLESS Overview
WatchModeLESS Framework
LESS 코드를 실시간으로 변경할 수 있어요!
Watch ModeLESS Overview
less.watch()
#!watch
Why LESS?LESS Framework
왜? LESS를 사용하는 것이 좋은가요?
LESS FrameworkDynamic Stylesheet Language
≒LESS는 CSS의 확장버전으로 하위호환성이 뛰어납니다.
CSS의 기존 문법을 그대로 사용하기 때문에 익히기 쉽습니다.
APILESS Framework
LESS 사용 설명서
CommentsLESS API
LESS 코멘트(주석) - 손쉬운 주석 활용
ImportingLESS API
LESS 임포트(호출) - 외부 *.less, *.css 호출
VariablesLESS API
LESS 변수는 실상 상수로 문서 읽기가 완료되는 시점에서 한번만 정의됩니다.
MixinsLESS API
LESS 믹스인은 전달인자를 받지 않는 형태로도 사용이 가능합니다. 빈번하게 사용되는 경우 활용.
MixinsLESS API
LESS 믹스인은 전달인자가 다수일 경우, 이를 모두기억하기란 어렵죠. 이런 경우 @arguments를 사용합니다.
Pattern-matchingLESS API
LESS 패턴 매칭은 동일한 이름의 믹스인이 정의되어 있을 경우, 전달인자가 일치하는 경우의 믹스인이 동작합니다.
Guard expressionsLESS API
LESS 가드 표현식은 일종의 조건문으로, 조건을 확인하여 처리합니다. when 키워드가 가드 조건의 시작입니다.
Guard expressionsLESS API
LESS 가드 표현식에 활용되는 비교 연산자는, >= = =< <
Guard expressionsLESS API
LESS 가드 표현식에서 or 는 ,로 처리합니다.= 의 경우는 일치하는 경우 { }의 코드를 처리합니다.
Guard expressionsLESS API
LESS 가드 표현식에서 and는 두가지 조건 모두가 참일 경우, 처리됩니다. not은 부정, 반대의 경우입니다.
Guard expressionsLESS API
LESS 가드 표현식에서 전달인자 유형을 파악하기 위한종류별 함수를 지원합니다.
Color functionsLESS API
LESS 컬러 함수, HSLA 체계를 활용하여 손쉬운 변경 처리.
Color functionsLESS API
LESS 컬러 함수, 색상 정보 값을 가져옵니다.
Math functionsLESS API
LESS 수학 함수, 반올림 올림 내림 / 퍼센트 화
NamespaceLESS API
LESS 네임스페이스 - 배포용으로 제작시 활용합니다.
ScopeLESS API
LESS 스코프(영역) - 가까운 변수를 활용합니다.
String InterpolationLESS API
LESS 문자 채워넣기 - 문자를 변수화할 경우 사용합니다.PHP, ruby와 유사한 방법인 @{string}을 지원합니다.
EscapingLESS API
LESS 이스케이핑(예외) - 비표준 방법을 사용할 경우,~ 를 앞에 붙여 컴파일시... 예외 처리할 수 있습니다.
Javascript evaluationLESS API
LESS 자바스크립트 코드 처리 - 자바스크립트 코드를 활용하고 싶을 경우는 `(back-ticks) 내부에 작성합니다.
Problem?LESS Framework
가만?.. LESS 이대로는 문제가 있는데요?!
LESS ProblemDynamic Stylesheet Language
LESS. js 활용은 자바스크립트 미지원시 참담한 결과를 초래합니다.
CSS3를 좀 더 효율적으로 사용할 수 있도록 도와주는 매우 유용한
도구지만, 자바스크립트가 지원되지 않는 환경에서는 제 기능을 발휘하지 못합니다.
그렇다면 이 문제를 어떻게 해결해야 할까요?
LESS ProcessDynamic Stylesheet Language
LESS ProblemDynamic Stylesheet Language
LESS. js 대신 LESS 코드를 변환시킬 도구만 있으면 해결될 문제군요!
lessphp | .less{} | LESS.app | SimpleLESS | Less Parser
LessPHPleafo.net/lessphp
.less{}dotlesscss.org
{less}.app
incident57.com/less
SimpleLESSwearekiss.com/simpless
Less Parserproving-ground.be/less
Speakeryamoo9.com
facebook.com/yamoo9
twitter.com/yamoo9
cafe.naver.com/webstandardproject
만들면서 배우는 HTML5+CSS3+jQuery의 저자야무의 프레젠테이션이었습니다.
Top Related