{less} 시작하기
ABC Talk / Alan Hong
오늘은
{less}에 대해 간단히 살펴보고
새 프로젝트를 시작할 때, 거부감없이 사용할 수 있도록…
less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and ...
less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and ...
less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and ...
less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and ...
less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and ...
less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and ...
Variables
•

specify values in a single place, and then re-use
them through the stylesheet.!

•

http://jsbin.com/AYOHIxE/...
Scope
•

When defining a variable twice, the last definition of
the variable is used, searching from the current
scope upwar...
Comments
•

Single-line comments are also valid in LESS, but
they are ‘silent’, they don’t show up in the compiled
CSS out...
Mixins
•

embed all the properties of a class into another
class.!

•

http://jsbin.com/uDUWEKo/3/edit
Parametric Mixins
•

LESS has a special type of ruleset which can be
mixed in like classes, but accepts parameters.!

•

h...
!important
•

Use the !important keyword after mixin call to mark
all properties brought by it as !important!

•

http://j...
Nested Rules
•

nest selectors inside other selectors. This makes
inheritance clear and style sheets shorter.!

•

http://...
CSS Selector Nightmare
& combinator
•

it’s used when you want a nested selector to be
concatenated to its parent selector, instead of acting
as ...
Nested Media Queries
•

Media queries can be nested in the same way as
selectors e.g.!

•

http://jsbin.com/eMAQOmOC/2/edi...
Operations
•

Operations let you add, subtract, divide and multiply
property values and colors.!

•

http://jsbin.com/IVAB...
Functions
•

LESS provides a variety of functions which
transform colors, manipulate strings and do maths.!

•

Color: htt...
Importing
•

You can import both CSS and LESS files. Only
LESS files import statements are processed, CSS
file import stateme...
String interpolation
•

Variables can be embedded inside strings in a
similar way to Ruby or PHP, with the @{name}
constru...
Example
•

less-elements: https://github.com/dmitryf/elements/
blob/master/elements.less!

•

less-elements example: https...
vs Sass
•

Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
s...
vs Sass
•

Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
s...
vs Sass
•

Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
s...
vs Sass
•

Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
s...
vs Sass
•

Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
s...
결국…
sass: star (2741), fork (470)!
less: star (9582), fork (2034)
vs Sass
•

Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
s...
이미 늦은듯…
sass: star (2741), fork (470)!
less: star (9582), fork (2034)
감사합니다.
Less
Less
Less
Upcoming SlideShare
Loading in …5
×

Less

447 views
421 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
447
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Less

  1. 1. {less} 시작하기 ABC Talk / Alan Hong
  2. 2. 오늘은 {less}에 대해 간단히 살펴보고 새 프로젝트를 시작할 때, 거부감없이 사용할 수 있도록…
  3. 3. less? The dynamic stylesheet language. ! LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.! LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
  4. 4. less? The dynamic stylesheet language. ! LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.! LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
  5. 5. less? The dynamic stylesheet language. ! LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.! LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
  6. 6. less? The dynamic stylesheet language. ! LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.! LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
  7. 7. less? The dynamic stylesheet language. ! LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.! LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
  8. 8. less? The dynamic stylesheet language. ! LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.! LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
  9. 9. Variables • specify values in a single place, and then re-use them through the stylesheet.! • http://jsbin.com/AYOHIxE/5/edit
  10. 10. Scope • When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards.! • http://jsbin.com/AwUhUviw/2/edit
  11. 11. Comments • Single-line comments are also valid in LESS, but they are ‘silent’, they don’t show up in the compiled CSS output! • http://jsbin.com/EBomeHoW/1/edit
  12. 12. Mixins • embed all the properties of a class into another class.! • http://jsbin.com/uDUWEKo/3/edit
  13. 13. Parametric Mixins • LESS has a special type of ruleset which can be mixed in like classes, but accepts parameters.! • http://jsbin.com/uDUWEKo/1/edit
  14. 14. !important • Use the !important keyword after mixin call to mark all properties brought by it as !important! • http://jsbin.com/idALUbE/1/edit
  15. 15. Nested Rules • nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.! • http://jsbin.com/iKUsiNI/4/edit
  16. 16. CSS Selector Nightmare
  17. 17. & combinator • it’s used when you want a nested selector to be concatenated to its parent selector, instead of acting as a descendant. This is especially important for pseudo-classes like :hover and :focus.! • http://jsbin.com/iKUsiNI/3/edit
  18. 18. Nested Media Queries • Media queries can be nested in the same way as selectors e.g.! • http://jsbin.com/eMAQOmOC/2/edit
  19. 19. Operations • Operations let you add, subtract, divide and multiply property values and colors.! • http://jsbin.com/IVABOGO/2/edit
  20. 20. Functions • LESS provides a variety of functions which transform colors, manipulate strings and do maths.! • Color: http://jsbin.com/eBipaMUB/1/edit! • Math: http://jsbin.com/enIsiZig/1/edit
  21. 21. Importing • You can import both CSS and LESS files. Only LESS files import statements are processed, CSS file import statements are kept as they are.
  22. 22. String interpolation • Variables can be embedded inside strings in a similar way to Ruby or PHP, with the @{name} construct
  23. 23. Example • less-elements: https://github.com/dmitryf/elements/ blob/master/elements.less! • less-elements example: https://github.com/ HackerWins/summernote/blob/master/ summernote.less! • CSS Sprites: http://jsbin.com/OluTehe/1/edit
  24. 24. vs Sass • Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.[5]! • LESS is inspired by Sass.[6] Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.! • The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).[2]
  25. 25. vs Sass • Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.[5]! • LESS is inspired by Sass.[6] Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.! • The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).[2]
  26. 26. vs Sass • Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.[5]! • LESS is inspired by Sass.[6] Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.! • The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).[2]
  27. 27. vs Sass • Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.[5]! • LESS is inspired by Sass.[6] Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.! • The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).[2]
  28. 28. vs Sass • Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.[5]! • LESS is inspired by Sass.[6] Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.! • The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).[2]
  29. 29. 결국… sass: star (2741), fork (470)! less: star (9582), fork (2034)
  30. 30. vs Sass • Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.[5]! • LESS is inspired by Sass.[6] Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.! • The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).[2]
  31. 31. 이미 늦은듯… sass: star (2741), fork (470)! less: star (9582), fork (2034)
  32. 32. 감사합니다.

×