다이내믹 스타일시트 언어 Less framework 활용 by yamoo9

Modern Web LESS Framework

ya

moo9@

naver.com

facebo

ok.com

/yamo

o9

mailto:[email protected]




























































ModernWeb LESSFramework

lesscss.org

Modern webLESS Framework

LESS 프레임워크란?

LESS FrameworkDynamic Stylesheet Language

CSSCascading Style Sheet

LESSCSS + Dynamic Language


LESS란? CSS에 Script의 능력을 덧붙여 확장한 언어입니다.

The dynamic stylesheet language.LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

변수, 함수, 연산, 중첩, 스코프 등등


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;}


// 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;}


// 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는 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 키워드가 가드 조건의 시작입니다.


LESS 가드 표현식에 활용되는 비교 연산자는, >= = =< <


LESS 가드 표현식에서 or 는 ,로 처리합니다.= 의 경우는 일치하는 경우 { }의 코드를 처리합니다.


LESS 가드 표현식에서 and는 두가지 조건 모두가 참일 경우, 처리됩니다. not은 부정, 반대의 경우입니다.


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

http://leafo.net/lessphp/






.less{}dotlesscss.org

http://www.dotlesscss.org/






{less}.app

incident57.com/less

http://incident57.com/less/







































































































SimpleLESSwearekiss.com/simpless

http://wearekiss.com/simpless






Less Parserproving-ground.be/less

http://www.proving-ground.be/less/






Speakeryamoo9.com

facebook.com/yamoo9

twitter.com/yamoo9

cafe.naver.com/webstandardproject

만들면서 배우는 HTML5+CSS3+jQuery의 저자야무의 프레젠테이션이었습니다.

다이내믹 스타일시트 언어 Less framework 활용 by yamoo9

Lifestyle

Transcript of 다이내믹 스타일시트 언어 Less framework 활용 by yamoo9