Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Less

689 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

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. 감사합니다.

×