Building more with LESS CSS

Ever thought how much better CSS would be if you only had variables or expressions or "x" or "y". Tired of remembering all of the browser prefixes for the new CSS3 features? Enter LESS CSS. LESS CSS is a CSS pre-processor that offers variables, mixins, expressions and much more. This is how everyone dreamed CSS would be ran. In this session, you will learn how to fully harness all the functionality of LESS while avoiding some of the pitfalls many new users face. CSS3 will never seem easier!

Transcript

1. LESS BUILD MORE WITH OPEN WEST CONF | JAKE SMITH | MAY 03, 2013 Friday, May 3, 13
2. jakefolio http://jakefolio.com me@jakefolio.com Jake Smith Friday, May 3, 13
3. What is LESS? Friday, May 3, 13
4. ‣ CSS Pre-processor ‣ Syntax tries to stay as close as possible to the declarative nature of CSS ‣ Helps you be better organized (DRY) What is Less? Friday, May 3, 13
5. As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. Friday, May 3, 13
6. ‣ Solving IE or Other Browser Bugs ‣ Save you from yourself LESS is NOT Friday, May 3, 13
7. Variables Friday, May 3, 13
8. Variables Variables can be any type of variable (string, measure, keyword, etc.). Variables CAN NOT be used as a property name. @primary: #e7e7db; @gray: #4a4a43; @orange: #bd3b13; @tan: #89897A; @platinum: #d5d8df; @gold: #DBB541; @silver: #ccc; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @speakersPath: "/_images/speakers/"; @fontSerif: 'Droid Serif', georgia, serif; @fontSans-Serif: "SteelfishExtraBold", "Lucida Grande", arial, verdana; Friday, May 3, 13
9. Variables @fnord: "I am fnord."; @var: 'fnord'; content: @@var; http://lesscss.org/#-variables Friday, May 3, 13
10. Nesting Friday, May 3, 13
11. Nesting LESS provides nested rules for descendant selectors. The “&” is used to create pseudo-classes/elements. a { background: #f00; color: #fff; display: block; &:hover { background: #05761d; } &:visited { background: #fffc00; } } a { background: #f00; color: #fff; display: block; } a:hover { background: #05761d; } a:visited { background: #fffc00; } Friday, May 3, 13
12. .tweets { border-left: 2px solid #ddd; width: 454px; ul { list-style: none; margin: 0; padding: 0; li { display: block; a { color: @gray; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; &:hover { color: @gray; } } } } } .tweets { border-left: 2px solid #ddd; width: 454px; } .tweets ul { list-style: none; margin: 0; padding: 0; } .tweets ul li { display: block; } .tweets ul li a { color: #4a4a43; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; } .tweets ul li a:hover { color: #4a4a43; } Nesting Friday, May 3, 13
13. .tweets { border-left: 2px solid #ddd; width: 454px; ul { list-style: none; margin: 0; padding: 0; li { display: block; a { color: @gray; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; &:hover { color: @gray; } } } } } .tweets { border-left: 2px solid #ddd; width: 454px; } .tweets ul { list-style: none; margin: 0; padding: 0; } .tweets ul li { display: block; } .tweets ul li a { color: #4a4a43; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; } .tweets ul li a:hover { color: #4a4a43; } Nesting BLOATED SPECIFICITY Friday, May 3, 13
14. .tweets { border-left: 2px solid #ddd; width: 454px; ul { list-style: none; margin: 0; padding: 0; li { display: block; a { color: @gray; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; &:hover { color: @gray; } } } } } .tweets { border-left: 2px solid #ddd; width: 454px; } .tweets ul { list-style: none; margin: 0; padding: 0; } .tweets ul li { display: block; } .tweets ul li a { color: #4a4a43; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; } .tweets ul li a:hover { color: #4a4a43; } Nesting BLOATED SPECIFICITY Friday, May 3, 13
15. .tweets { border-left: 2px solid #ddd; width: 454px; ul { list-style: none; margin: 0; padding: 0; } li { display: block; } a { color: @gray; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; &:hover { color: @gray; } } } .tweets { border-left: 2px solid #ddd; width: 454px; } .tweets ul { list-style: none; margin: 0; padding: 0; } .tweets li { display: block; } .tweets a { color: #4a4a43; display: block; font-size: 14px; margin: 2px 0; padding: 5px 10px; text-decoration: none; } .tweets a:hover { background: #d3d3bc; color: #4a4a43; } Nesting Friday, May 3, 13
16. Nesting LESS supports media querying bubbling in 1.3.x It does not merge media queries together though @media screen and (max-width: 400px) { .main-nav > .main-nav__item { display: block; } } .grid { @media screen and (max-width: 400px) { width: 20em; } } @media screen and (max-width: 400px) { .main-nav > .main-nav__item { display: block; } } @media screen and (max-width: 400px) { .grid { width: 20em; } } Friday, May 3, 13
17. Imports Friday, May 3, 13
18. // FearLESS @import 'reset/boilerplate'; @import 'layout/helpers'; @import 'layout/grid'; @import 'css3/init'; // Application @import 'settings'; @import 'print'; @import 'fonts'; @import 'responsive'; @import 'forms'; @import 'typography'; LESS import is styled just like CSS, but merges when compiled. If the file is .less, there is no need to specify extension. Imports Friday, May 3, 13
19. In LESS 1.3.x, you can now import files into context. You can also easily wrap a media query in an import. Imports .grid { @import 'grid'; } // Outputted CSS .grid { > .grid-item { width: 300px; } > .grid-item a { color: #f00; display: block; } } // import with media queries @import "mobile" screen and (max-width: 400px); // Outputted CSS @media screen and (max-width: 400px) { nav { display: block; } } Friday, May 3, 13
20. @import-once Friday, May 3, 13
21. @import-once Friday, May 3, 13
22. @import-once Removed in LESS 1.4+ Friday, May 3, 13
23. String Interpolation Friday, May 3, 13
24. String Interpolation @imgPath: "http://assets1.mydomain.com/"; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @sponsorsPath: "/_images/sponsors/"; .divider { background: transparent url('@{imgPath}divider.png') repeat-x; height: 6px; margin: 15px 0; } .sponsor { background: @primary; .float-left(); .shadow(0 0 1px rgba(0, 0, 0, 0.8)); // Sponsors &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); } } Friday, May 3, 13
25. String Interpolation @imgPath: "http://assets1.mydomain.com/"; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @sponsorsPath: "/_images/sponsors/"; .divider { background: transparent url('@{imgPath}divider.png') repeat-x; height: 6px; margin: 15px 0; } .sponsor { background: @primary; .float-left(); .shadow(0 0 1px rgba(0, 0, 0, 0.8)); // Sponsors &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); } } Friday, May 3, 13
26. String Interpolation @imgPath: "http://assets1.mydomain.com/"; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @sponsorsPath: "/_images/sponsors/"; .divider { background: transparent url('@{imgPath}divider.png') repeat-x; height: 6px; margin: 15px 0; } .sponsor { background: @primary; .float-left(); .shadow(0 0 1px rgba(0, 0, 0, 0.8)); // Sponsors &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); } } Friday, May 3, 13
27. String Interpolation @imgPath: "http://assets1.mydomain.com/"; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @sponsorsPath: "/_images/sponsors/"; .divider { background: transparent url('@{imgPath}divider.png') repeat-x; height: 6px; margin: 15px 0; } .sponsor { background: @primary; .float-left(); .shadow(0 0 1px rgba(0, 0, 0, 0.8)); // Sponsors &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); } } Friday, May 3, 13
28. String Interpolation @imgPath: "http://assets1.mydomain.com/"; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @sponsorsPath: "/_images/sponsors/"; .divider { background: transparent url('@{imgPath}divider.png') repeat-x; height: 6px; margin: 15px 0; } .sponsor { background: @primary; .float-left(); .shadow(0 0 1px rgba(0, 0, 0, 0.8)); // Sponsors &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); } } Friday, May 3, 13
29. String Interpolation @imgPath: "http://assets1.mydomain.com/"; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @sponsorsPath: "/_images/sponsors/"; .divider { background: transparent url('@{imgPath}divider.png') repeat-x; height: 6px; margin: 15px 0; } .sponsor { background: @primary; .float-left(); .shadow(0 0 1px rgba(0, 0, 0, 0.8)); // Sponsors &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); } } Friday, May 3, 13
30. String Interpolation @imgPath: "http://assets1.mydomain.com/"; @thumbPath: "/_images/speakers/thumbnail/"; @profilePath: "/_images/speakers/profile/"; @sponsorsPath: "/_images/sponsors/"; .divider { background: transparent url('@{imgPath}divider.png') repeat-x; height: 6px; margin: 15px 0; } .sponsor { background: @primary; .float-left(); .shadow(0 0 1px rgba(0, 0, 0, 0.8)); // Sponsors &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); } } Friday, May 3, 13
31. String Interpolation @color: red; @color2: "red"; @color3: ~"red"; .promo-@{color}-box { display: block; } .promo-@{color2}-box { display: block; } .promo-@{color3}-box { display: block; } .promo-#ff0000-box { display: block; } .promo-'red'-box { display: block; } .promo-red-box { display: block; } Friday, May 3, 13
32. Operations Friday, May 3, 13
33. @base: #139793; @padding: 10px; a { color: @base; &:hover { color: @base + #ccc; } &:visited { color: @base + #333; } } .my-module { padding: (@padding + 5) 10px; } .circle(@size: 10px) { height: @size; width: @size; -webkit-border-radius: (@size / 2); -moz-border-radius: (@size / 2); -o-border-radius: (@size / 2); border-radius: (@size / 2); } Operations LESS has basic math operations. Also, you can do HEX math. LESS is smart enough to know the type of measure (px, em, pt). Friday, May 3, 13
34. @base: #139793; @padding: 10px; a { color: @base; &:hover { color: @base + #ccc; } &:visited { color: @base + #333; } } .my-module { padding: (@padding + 5) 10px; } .circle(@size: 10px) { height: @size; width: @size; -webkit-border-radius: (@size / 2); -moz-border-radius: (@size / 2); -o-border-radius: (@size / 2); border-radius: (@size / 2); } Operations LESS has basic math operations. Also, you can do HEX math. LESS is smart enough to know the type of measure (px, em, pt). Friday, May 3, 13
35. @base: #139793; @padding: 10px; a { color: @base; &:hover { color: @base + #ccc; } &:visited { color: @base + #333; } } .my-module { padding: (@padding + 5) 10px; } .circle(@size: 10px) { height: @size; width: @size; -webkit-border-radius: (@size / 2); -moz-border-radius: (@size / 2); -o-border-radius: (@size / 2); border-radius: (@size / 2); } Operations LESS has basic math operations. Also, you can do HEX math. LESS is smart enough to know the type of measure (px, em, pt). Friday, May 3, 13
36. @base: #139793; @padding: 10px; a { color: @base; &:hover { color: @base + #ccc; } &:visited { color: @base + #333; } } .my-module { padding: (@padding + 5) 10px; } .circle(@size: 10px) { height: @size; width: @size; -webkit-border-radius: (@size / 2); -moz-border-radius: (@size / 2); -o-border-radius: (@size / 2); border-radius: (@size / 2); } Operations LESS has basic math operations. Also, you can do HEX math. LESS is smart enough to know the type of measure (px, em, pt). Friday, May 3, 13
37. @base: #139793; @padding: 10px; a { color: @base; &:hover { color: @base + #ccc; } &:visited { color: @base + #333; } } .my-module { padding: (@padding + 5) 10px; } .circle(@size: 10px) { height: @size; width: @size; -webkit-border-radius: (@size / 2); -moz-border-radius: (@size / 2); -o-border-radius: (@size / 2); border-radius: (@size / 2); } Operations LESS has basic math operations. Also, you can do HEX math. LESS is smart enough to know the type of measure (px, em, pt). Friday, May 3, 13
38. Mixins Friday, May 3, 13
39. Mixins Mixins are the heart of LESS. A mixin lets you take the rules from a declaration and reuse them (DRY). .module { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left { _display: inline; float: left; } .news { width: 300px; .float-left; .module; } .module() { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left() { _display: inline; float: left; } .news { width: 300px; .float-left(); .module(); } Friday, May 3, 13
40. Mixins Mixins are the heart of LESS. A mixin lets you take the rules from a declaration and reuse them (DRY). .module { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left { _display: inline; float: left; } .news { width: 300px; .float-left; .module; } .module() { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left() { _display: inline; float: left; } .news { width: 300px; .float-left(); .module(); } PARAMETRIC Friday, May 3, 13
41. Mixins Mixins are the heart of LESS. A mixin lets you take the rules from a declaration and reuse them (DRY). .module { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left { _display: inline; float: left; } .news { width: 300px; .float-left; .module; } .module() { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left() { _display: inline; float: left; } .news { width: 300px; .float-left(); .module(); } PARAMETRIC Friday, May 3, 13
42. Mixins Mixins are the heart of LESS. A mixin lets you take the rules from a declaration and reuse them (DRY). .module { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left { _display: inline; float: left; } .news { width: 300px; .float-left; .module; } .module() { background: #fff; color: rgb(45, 45, 45); font-size: 14px; padding: 12px; } .float-left() { _display: inline; float: left; } .news { width: 300px; .float-left(); .module(); } PARAMETRIC Friday, May 3, 13
43. Parametric Mixins Parametric Mixins are not compiled. Parametric Mixins are defined by parenthesis. Arguments can have predefined values .rounded(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .transition(@who: all, @duration: .5s, @easing: ease-out){ -webkit-transition: @arguments; -moz-transition: @arguments; -ms-transition: @arguments; -o-transition: @arguments; transition: @arguments; } .shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; -moz-box-shadow: @shadow; box-shadow: @shadow; } Friday, May 3, 13
44. Mixin Matching .mixin (dark, @color) { color: darken(@color, 10%); } .mixin (light, @color) { color: lighten(@color, 10%); } .mixin (@_, @color) { display: block; } @switch: light; .class { .mixin(@switch, #888); } http://lesscss.org/#-pattern-matching-and-guard-expressions .class { display: block; color: #a2a2a2; } Friday, May 3, 13
45. Mixin Matching .mixin (dark, @color) { color: darken(@color, 10%); } .mixin (light, @color) { color: lighten(@color, 10%); } .mixin (@_, @color) { display: block; } @switch: light; .class { .mixin(@switch, #888); } http://lesscss.org/#-pattern-matching-and-guard-expressions .class { display: block; color: #a2a2a2; } Friday, May 3, 13
46. Mixin Matching .mixin (dark, @color) { color: darken(@color, 10%); } .mixin (light, @color) { color: lighten(@color, 10%); } .mixin (@_, @color) { display: block; } @switch: light; .class { .mixin(@switch, #888); } http://lesscss.org/#-pattern-matching-and-guard-expressions .class { display: block; color: #a2a2a2; } Friday, May 3, 13
47. Built-in Functions Friday, May 3, 13
48. Color Functions Friday, May 3, 13
49. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 http://lesscss.org/#-color-functions Friday, May 3, 13
50. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX http://lesscss.org/#-color-functions Friday, May 3, 13
51. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX http://lesscss.org/#-color-functions Friday, May 3, 13
52. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX http://lesscss.org/#-color-functions Friday, May 3, 13
53. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX http://lesscss.org/#-color-functions Friday, May 3, 13
54. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX http://lesscss.org/#-color-functions Friday, May 3, 13
55. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX RGBA http://lesscss.org/#-color-functions Friday, May 3, 13
56. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX RGBA RGBA http://lesscss.org/#-color-functions Friday, May 3, 13
57. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX RGBA HEX RGBA http://lesscss.org/#-color-functions Friday, May 3, 13
58. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX RGBA HEX HEX RGBA http://lesscss.org/#-color-functions Friday, May 3, 13
59. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX RGBA HEX HEX RGBA HEX http://lesscss.org/#-color-functions Friday, May 3, 13
60. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX RGBA HEX HEX RGBA HEX DOCS http://lesscss.org/#-color-functions Friday, May 3, 13
61. Color Functions lighten(@color, 10%); // 10% *lighter* than @color darken(@color, 10%); // 10% *darker* than @color saturate(@color, 10%); // 10% *more* saturated than @color desaturate(@color, 10%); // 10% *less* saturated than @color fadein(@color, 10%); // 10% *less* transparent than @color fadeout(@color, 10%); // 10% *more* transparent than @color fade(@color, 50%); // 50% transparency spin(@color, 10); // 10 degree larger in hue than @color spin(@color, -10); // 10 degree smaller hue than @color mix(@color1, @color2, 50%); // mix of @color1 and @color2 HEX HEX HEX HEX HEX RGBA HEX HEX RGBA HEX DOCS http://lesscss.org/#-color-functions mix(#FFF, #000, 100%); // returns #FFFFFF; Friday, May 3, 13
62. Demo Time Friday, May 3, 13
63. Math Functions Friday, May 3, 13
64. Math Functions .bottom(@size: 4px, @leftColor: #333, @rightColor: #333) { @arrow: floor(@size / 2); position: relative; left: -@size; &:before { ... } } round(1.67); // returns `2` ceil(2.4); // returns `3` floor(2.6); // returns `2` percentage(0.5); // returns `50%` Friday, May 3, 13
65. Guards (if/else) Friday, May 3, 13
66. Guards Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the alternative to conditional statements; formatted similar to media-queries. // Example media query @media screen and (max-width: 480px) @media screen and (max-width: 480px), screen and (max-device-width: 480px) Friday, May 3, 13
67. Guards Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the alternative to conditional statements; formatted similar to media-queries. // Example media query @media screen and (max-width: 480px) @media screen and (max-width: 480px), screen and (max-device-width: 480px) // Width must be greater than or equal to 200px .ribbon (@width, @direction) when (@width >= 200px) { ... } Friday, May 3, 13
68. Guards Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the alternative to conditional statements; formatted similar to media-queries. // Example media query @media screen and (max-width: 480px) @media screen and (max-width: 480px), screen and (max-device-width: 480px) // Width must be greater than or equal to 200px .ribbon (@width, @direction) when (@width >= 200px) { ... } // Only accept if direction is left or right .ribbon (@width, @direction) when (@direction = left), (@direction = right) Friday, May 3, 13
69. Guards Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the alternative to conditional statements; formatted similar to media-queries. // Example media query @media screen and (max-width: 480px) @media screen and (max-width: 480px), screen and (max-device-width: 480px) // Width must be greater than or equal to 200px .ribbon (@width, @direction) when (@width >= 200px) { ... } // Only accept if direction is left or right .ribbon (@width, @direction) when (@direction = left), (@direction = right) // Change to percentage for responsive/fluid layout .sidebar (@width) when not (ispercentage(@width)) { ... } Friday, May 3, 13
70. Guards Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the alternative to conditional statements; formatted similar to media-queries. // Example media query @media screen and (max-width: 480px) @media screen and (max-width: 480px), screen and (max-device-width: 480px) // Width must be greater than or equal to 200px .ribbon (@width, @direction) when (@width >= 200px) { ... } // Only accept if direction is left or right .ribbon (@width, @direction) when (@direction = left), (@direction = right) // Change to percentage for responsive/fluid layout .sidebar (@width) when not (ispercentage(@width)) { ... } // Path must be a valid url .icon (@filename, @path) when (isurl(@path)) { ... } Friday, May 3, 13
71. Guards Type Checking iscolor isnumber isstring iskeyword isurl Unit Checking ispixel ispercentage isem Friday, May 3, 13
72. Namespaces/Scope Friday, May 3, 13
73. Scope Scope in LESS works very similar to javascript. A new scope is defined in each CSS declearation @primary: #fff; .float-left() { _display: inline; float: left; } .module { background: @primary; .float-left(); } #wide-theme { @primary: #000; .news { color: @primary; } } #mobile-theme { .news { color: @primary; } } .module { background: #ffffff; _display: inline; float: left; } #wide-theme .news { color: #000000; } #mobile-theme .news { color: #ffffff; } Friday, May 3, 13
74. Namespace Helps avoid naming conflicts with multiple libraries. Better way of organizing mixins. #arrow { .left(@size: 10px, @color: #333) { ... } .right(@size: 10px, @color: #333) { ... } .up(@size: 10px, @color: #333) { ... } .down(@size: 10px, @color: #333) { ... } } #ribbon { .top(@size: 4px, @leftColor: #333, @rightColor: #333) { @arrow: @size / 2; left: -@size; &:before { ... } &:after { ... } } .bottom(@size: 4px, @leftColor: #333, @rightColor: #333) { @arrow: @size / 2; left: -@size; &:before { ... } &:after { ... } } } Friday, May 3, 13
75. Example APP Friday, May 3, 13
76. Friday, May 3, 13
77. Friday, May 3, 13
78. Outputting CSS Friday, May 3, 13
79. LESS in the Browser <!-- Style must come before javascript --> <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> Friday, May 3, 13
80. LESS APPS Friday, May 3, 13
81. Friday, May 3, 13
82. Friday, May 3, 13
83. Friday, May 3, 13
84. Friday, May 3, 13
85. > lessc screen.less screen.min.css -x Friday, May 3, 13
86. LESS vs. SASS Friday, May 3, 13
87. Friday, May 3, 13
88. ‣ SASS has @extend ‣ String Interpolation can be applied to property Current Differences Friday, May 3, 13
89. LESS/SASS vs. CSS Friday, May 3, 13
90. LESS doesn’t write bloated CSS, Developers Do! Friday, May 3, 13
91. What’s Next? Friday, May 3, 13
92. ‣ :extend() functionality, FINALLY! ‣ math must be in (2px/1px) ‣ variables can be used as default value of mixins - .module(@width: @baseWidth) { … } ‣ new math functions: pow, pi, tan, sin, cos, etc. ‣ convert function convert(5em, px) Coming in LESS 1.4 Friday, May 3, 13
93. Questions? Concerns? Complaints? Friday, May 3, 13
94. Thanks for Listening jakefolio http://jakefolio.com me@jakefolio.com Please Rate Me! https://joind.in/8380 Friday, May 3, 13