Less
0 likes1,527 views
LESS is a dynamic stylesheet language that extends CSS by adding features like variables, mixins, operations, and functions. It allows values to be specified once and re-used throughout stylesheets. LESS runs on both server-side (with Node.js and Rhino) and client-side (in modern browsers). While similar to Sass, LESS was designed to have a syntax identical to CSS so that existing CSS code can be used as valid LESS code. Both Sass and LESS allow writing CSS in a programming-like way, but Sass removes curly braces from its syntax while LESS aims to be as close to CSS as possible.
![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]](https://image.slidesharecdn.com/less-131128041314-phpapp02/85/Less-25-320.jpg)
![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]](https://image.slidesharecdn.com/less-131128041314-phpapp02/85/Less-26-320.jpg)
![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]](https://image.slidesharecdn.com/less-131128041314-phpapp02/85/Less-27-320.jpg)
![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]](https://image.slidesharecdn.com/less-131128041314-phpapp02/85/Less-29-320.jpg)
![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]](https://image.slidesharecdn.com/less-131128041314-phpapp02/85/Less-30-320.jpg)
![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]](https://image.slidesharecdn.com/less-131128041314-phpapp02/85/Less-33-320.jpg)
Less
- 1. {less} 시작하기 ABC Talk / Alan Hong
- 2. 오늘은 {less}에 대해 간단히 살펴보고 새 프로젝트를 시작할 때, 거부감없이 사용할 수 있도록…
- 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. 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. 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. 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. 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. 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. Variables • specify values in a single place, and then re-use them through the stylesheet.! • http://jsbin.com/AYOHIxE/5/edit
- 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. 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. Mixins • embed all the properties of a class into another class.! • http://jsbin.com/uDUWEKo/3/edit
- 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. !important • Use the !important keyword after mixin call to mark all properties brought by it as !important! • http://jsbin.com/idALUbE/1/edit
- 15. Nested Rules • nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.! • http://jsbin.com/iKUsiNI/4/edit
- 18. & 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
- 19. Nested Media Queries • Media queries can be nested in the same way as selectors e.g.! • http://jsbin.com/eMAQOmOC/2/edit
- 20. Operations • Operations let you add, subtract, divide and multiply property values and colors.! • http://jsbin.com/IVABOGO/2/edit
- 21. 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
- 22. 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.
- 23. String interpolation • Variables can be embedded inside strings in a similar way to Ruby or PHP, with the @{name} construct
- 24. 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
- 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. 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. 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. 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]
- 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]
- 32. 결국… sass: star (2741), fork (470)! less: star (9582), fork (2034)
- 33. 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]
- 34. 이미 늦은듯… sass: star (2741), fork (470)! less: star (9582), fork (2034)
- 35. 감사합니다.