Building more with LESS CSS

Slide 1

Slide 1 text

LESS BUILD MORE WITH OPEN WEST CONF | JAKE SMITH | MAY 03, 2013 Friday, May 3, 13

Slide 2

Slide 2 text

jakefolio http://jakefolio.com [email protected] Jake Smith Friday, May 3, 13

Slide 3

Slide 3 text

What is LESS? Friday, May 3, 13

Slide 4

Slide 4 text

‣ 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

‣ Solving IE or Other Browser Bugs ‣ Save you from yourself LESS is NOT Friday, May 3, 13

Slide 7

Slide 7 text

Variables Friday, May 3, 13

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Variables @fnord: "I am fnord."; @var: 'fnord'; content: @@var; http://lesscss.org/#-variables Friday, May 3, 13

Slide 10

Slide 10 text

Nesting Friday, May 3, 13

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

.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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

.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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Imports Friday, May 3, 13

Slide 18

Slide 18 text

// 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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@import-once Friday, May 3, 13

Slide 21

Slide 21 text

@import-once Friday, May 3, 13

Slide 22

Slide 22 text

@import-once Removed in LESS 1.4+ Friday, May 3, 13

Slide 23

Slide 23 text

String Interpolation Friday, May 3, 13

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Operations Friday, May 3, 13

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Mixins Friday, May 3, 13

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Built-in Functions Friday, May 3, 13

Slide 48

Slide 48 text

Color Functions Friday, May 3, 13

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Demo Time Friday, May 3, 13

Slide 63

Slide 63 text

Math Functions Friday, May 3, 13

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Guards (if/else) Friday, May 3, 13

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Guards Type Checking iscolor isnumber isstring iskeyword isurl Unit Checking ispixel ispercentage isem Friday, May 3, 13

Slide 72

Slide 72 text

Namespaces/Scope Friday, May 3, 13

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Example APP Friday, May 3, 13

Slide 76

Slide 76 text

Friday, May 3, 13

Slide 77

Slide 77 text

Friday, May 3, 13

Slide 78

Slide 78 text

Outputting CSS Friday, May 3, 13

Slide 79

Slide 79 text

LESS in the Browser Friday, May 3, 13

Slide 80

Slide 80 text

LESS APPS Friday, May 3, 13

Slide 81

Slide 81 text

Friday, May 3, 13

Slide 82

Slide 82 text

Friday, May 3, 13

Slide 83

Slide 83 text

Friday, May 3, 13

Slide 84

Slide 84 text

Friday, May 3, 13

Slide 85

Slide 85 text

> lessc screen.less screen.min.css -x Friday, May 3, 13

Slide 86

Slide 86 text

LESS vs. SASS Friday, May 3, 13

Slide 87

Slide 87 text

Friday, May 3, 13

Slide 88

Slide 88 text

‣ SASS has @extend ‣ String Interpolation can be applied to property Current Differences Friday, May 3, 13

Slide 89

Slide 89 text

LESS/SASS vs. CSS Friday, May 3, 13

Slide 90

Slide 90 text

LESS doesn’t write bloated CSS, Developers Do! Friday, May 3, 13

Slide 91

Slide 91 text

What’s Next? Friday, May 3, 13

Slide 92

Slide 92 text

‣ :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

Slide 93

Slide 93 text

Questions? Concerns? Complaints? Friday, May 3, 13

Slide 94

Slide 94 text

Thanks for Listening jakefolio http://jakefolio.com [email protected] Please Rate Me! https://joind.in/8380 Friday, May 3, 13