LESS 프레임워크 활용법에 대한 프레젠테이션 파일입니다. 강의용으로 상세한 설명은 생략되어 있습니다. 수업 진행 시 보충 설명을 위한 교보재.

1. Modern
Web LESS
Framework
om
er.c 9
nav oo
@ /yam
o9 m
mo .co
ya ok
o
eb
fac

2. Modern
Web LESS
lesscss.org
Framework

3. LESS 프레임워크란?
Modern web
LESS Framework

4. LESS Framework
Dynamic Stylesheet Language
CSS LESS
Cascading Style Sheet CSS + Dynamic Language

5. LESS Framework
Dynamic Stylesheet Language
The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
LESS란? CSS에 Script의 능력을 덧붙여 확장한 언어입니다.
변수, 함수, 연산, 중첩, 스코프 등등

6. LESS Framework Dynamic Stylesheet Language
The dynamic stylesheet language.
LESS runs on both the client-side (IE6+, Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
LESS는 클라이언트 또는 서버 환경 모두에서 실행됩니다.
node.js

7. ...
<link rel="stylesheet/less" href="css/styles.less">
<script src="js/less.js"></script>
...

9. LESS 간단하게 미리보기!
Overview
LESS Framework

10. Variables
LESS Overview
@variables
LESS

11. 변수는

12. 앞에

13. @를

14. 붙여서

15. 표기합니다.
// LESS // 변경된 CSS
@lightCyan: #73cbdc; #container {
color: #73cbdc;
#container { }
color: @lightCyan;
} #footer h2 {
color: #73cbdc;
#footer h2 { }
color: @lightCyan;
}

16. Mixins LESS Overview
@parameter
믹스인은

17. 클래스

18. 이름

19. 형식으로

20. 선언되며

21.
(

22. )

23. 안에

24. 전달인자를

25. 받을

26. 수

27. 있습니다.
// LESS
.coner-round(@radius: 5px) {
! -webkit-border-radius: @radius;
! -moz-border-radius: @radius;
! border-radius: @radius;
}
.round {
! .coner-round;
}
.rounder {
! .coner-round(10px);
}

28. Mixins
LESS Overview
// 변경된 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;
}

29. Nested Rules LESS Overview
Nested

30. Rules
// LESS LESS

31. 중첩

32. 작성규칙은

33. 긴

34. 이름을

35. 중복해서
#contents { 작성하지

36. 않아도

37. 되기

38. 때문에

39. 효율적입니다.
! h2 {
! ! font-size: 24px;
! ! font-weight: normal;
! }
! p {
! ! font-size: 12px;
! ! a { text-decoration: none;
! ! ! :hover { color: #73cbdc; }
! ! }
! }
}

40. Nested Rules
LESS Overview
// 변경된 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;
}

41. Operation
LESS Overview
// LESS
@base-font-size: 12px;
@base-font-color: #2e2d2c;
body {
! font: @base-font-size/1.5 나눔 고딕;
! color: @base-font-color;
}
Operation
LESS

42. 에서는

43. 사칙연산이

44. 가능합니다.
.article { 크기

45. 및

46. 색상과

47. 관련한

48. 속성에

49. 적용가능합니다.
! font-size: @base-font-size * 1.2;
! border: 1px solid (@base-font-color + #909090);
}

50. Nested Rules
LESS Overview
// 변경된 CSS
body {
! font: 12px/1.5 나눔 고딕;
! color: #2e2d2c;
}
.article {
! font-size: 14.4px;
! border: 1px solid #bebdbc;
}

51. Function LESS Overview
// LESS
@base-font-size: 12px;
@base-font-color: #2e2d2c;
body {
! font: @base-font-size/1.5 나눔 고딕;
! color: @base-font-color;
}
Function
LESS

52. 에서는

53. 함수를

54. 사용하여

55.
.article { 값을

56. 손쉽게

57. 변경

58. 가능합니다.
! font-size: @base-font-size * 1.2;
! border: 1px solid lighten(@base-font-color, 15%);
}

59. Function
LESS Overview
// 변경된 CSS
body {
! font: 12px/1.5 나눔 고딕;
! color: #2e2d2c;
}
.article {
! font-size: 14.4px;
! border: 1px solid #545454;
}

60. LESS 코드를 실시간으로 변경할 수 있어요!
WatchMode
LESS Framework

61. Watch Mode LESS Overview
#!watch
less.watch()

62. 왜? LESS를 사용하는 것이 좋은가요?
Why LESS?
LESS Framework

63. LESS Framework
Dynamic Stylesheet Language
≒
LESS는 CSS의 확장버전으로 하위호환성이 뛰어납니다.
CSS의 기존 문법을 그대로 사용하기 때문에 익히기 쉽습니다.

64. API
LESS 사용 설명서
LESS Framework

65. Comments
LESS API
LESS 코멘트(주석) - 손쉬운 주석 활용

66. Importing
LESS API
LESS 임포트(호출) - 외부 *.less, *.css 호출

67. Variables
LESS API
LESS 변수는 실상 상수로
문서 읽기가 완료되는 시점에서 한번만 정의됩니다.

68. Mixins
LESS API
LESS 믹스인은 전달인자를 받지 않는 형태로도
사용이 가능합니다. 빈번하게 사용되는 경우 활용.

69. Mixins
LESS API
LESS 믹스인은 전달인자가 다수일 경우, 이를 모두
기억하기란 어렵죠. 이런 경우 @arguments를 사용합니다.

70. Pattern-matching
LESS API
LESS 패턴 매칭은 동일한 이름의 믹스인이 정의되어 있을
경우, 전달인자가 일치하는 경우의 믹스인이 동작합니다.

71. Guard expressions
LESS API
LESS 가드 표현식은 일종의 조건문으로, 조건을 확인하여
처리합니다. when 키워드가 가드 조건의 시작입니다.

72. Guard expressions
LESS API
LESS 가드 표현식에 활용되는 비교 연산자는, = = =

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

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

75. Guard expressions
LESS API
LESS 가드 표현식에서 전달인자 유형을 파악하기 위한
종류별 함수를 지원합니다.

76. Color functions
LESS API
LESS 컬러 함수, HSLA 체계를 활용하여 손쉬운 변경 처리.

77. Color functions
LESS API
LESS 컬러 함수, 색상 정보 값을 가져옵니다.

78. Math functions
LESS API
LESS 수학 함수, 반올림 올림 내림 / 퍼센트 화

79. Namespace
LESS API
LESS 네임스페이스 - 배포용으로 제작시 활용합니다.

80. Scope
LESS API
LESS 스코프(영역) - 가까운 변수를 활용합니다.

81. String Interpolation
LESS API
LESS 문자 채워넣기 - 문자를 변수화할 경우 사용합니다.
PHP, ruby와 유사한 방법인 @{string}을 지원합니다.

82. Escaping
LESS API
LESS 이스케이핑(예외) - 비표준 방법을 사용할 경우,
~ 를 앞에 붙여 컴파일시... 예외 처리할 수 있습니다.

83. Javascript evaluation
LESS API
LESS 자바스크립트 코드 처리 - 자바스크립트 코드를 활용
하고 싶을 경우는 `(back-ticks) 내부에 작성합니다.

84. 가만?.. LESS 이대로는 문제가 있는데요?!
Problem?
LESS Framework

85. LESS Problem
Dynamic Stylesheet Language
LESS. js 활용은 자바스크립트 미지원시 참담한 결과를 초래합니다.
CSS3를 좀 더 효율적으로 사용할 수 있도록 도와주는 매우 유용한
도구지만, 자바스크립트가 지원되지 않는 환경에서는 제 기능을 발휘하지 못합니다.
그렇다면 이 문제를 어떻게 해결해야 할까요?

86. LESS Process
Dynamic Stylesheet Language

87. LESS Problem
Dynamic Stylesheet Language
LESS. js 대신 LESS 코드를 변환시킬 도구만 있으면 해결될 문제군요!
lessphp | .less{} | LESS.app | SimpleLESS | Less Parser

88. LessPHP
leafo.net/lessphp

89. .less{}
dotlesscss.org

90. {less} .app
incident57.com/less

91. SimpleLESS
wearekiss.com/simpless

92. Less Parser
proving-ground.be/less

93. 만들면서 배우는 HTML5+CSS3+jQuery의 저자
야무의 프레젠테이션이었습니다.
facebook.com/yamoo9
twitter.com/yamoo9
cafe.naver.com/webstandardproject
Speaker yamoo9.com