Slide 1

Slide 1 text

Doing more with LESS December 14, 2010 - DallasPHP Jake Smith http://joind.in/talk/view/2478

Slide 2

Slide 2 text

What is LESS? • Dynamic CSS • CSS pre-processor • Leaner/Meaner CSS • Minified CSS (optional)

Slide 3

Slide 3 text

Other Types of LESS • SASS (Ruby) • http://sass-lang.com/ • Scaffold (PHP) • http://github.com/anthonyshort/Scaffold • LESSPHP • http://leafo.net/lessphp/

Slide 4

Slide 4 text

SASS vs. LESS • Not as native syntax (css) as LESS • SASS mimics ruby • SASS.js under development now • In the end it’s all about preference

Slide 5

Slide 5 text

LESS Features

Slide 6

Slide 6 text

Variables @base_red: #e20d15; @base_blue: #0067b0; @default_gap: 10px;

Slide 7

Slide 7 text

Importing @import ‘reset’; @import ‘global.css’;

Slide 8

Slide 8 text

Comments /* Default CSS Comment */ // Easier Commenting!

Slide 9

Slide 9 text

Nested Rules .main { background: #F7F7F7; padding-bottom: 20px; .module { background: #FFF; border: 1px #CCC solid; padding: 10px; } .content { width: 650px; .float_left; .module; .shadow(2px, 2px, 10px, #666); .rounded(10px); .title { background: @base_red; border-bottom: 1px @base_red solid; font-weight: bold; margin-bottom: 1px; padding: 5px; .comments { } } } }

Slide 10

Slide 10 text

Nested Rules (Links) a { color: #F00; text-decoration: none; &:hover { color: #999; } &:active { color: #666; } &:visited { text-decoration: underline; } }

Slide 11

Slide 11 text

Mixins .float_left { display: inline; float: left; } .float_right { display: inline; float: right; } .header { background: #f7f7f7; border-top: 3px @base_red solid; padding: 15px 0; .logo { .float_left; } .navigation { .float_right; } }

Slide 12

Slide 12 text

Operators @the-border: 1px; @base-color: #111; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: (@base-color + #111) * 1.5; } Source: http://lesscss.org/

Slide 13

Slide 13 text

Namespacing #bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } #header a { color: orange; #bundle > .button; } Source: http://lesscss.org/docs

Slide 14

Slide 14 text

Rule Sets #defaults { @width: 960px; @color: #333; } #darkTheme { @color: #FFF; } .article { color: #294366; } .comment { width: #defaults[@width]; color: .article['color']; }

Slide 15

Slide 15 text

Scope Variables @default_color: #FFF; // Global Variable #bundle { @default_color: #000; // Scope Variable .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } #header a { color: orange; #bundle > .button; } Source: http://lesscss.org/docs

Slide 16

Slide 16 text

Built-in Mixins • saturate(color, amount) • desaturate(color, amount) • lighten(color, amount) • darken(color, amount) • greyscale(color, amount)

Slide 17

Slide 17 text

LESS Development

Slide 18

Slide 18 text

• Install node.js • Install NPM (Node Package Manager) • Install LESS Environment *nix/OSX

Slide 19

Slide 19 text

Environment Windows • http://blog.dotsmart.net/2010/11/26/ running-the-less-js-command-line-compiler- on-windows/ • lessc screen.less [output.css] [-compress]

Slide 20

Slide 20 text

LESS App • Compile CSS from LESS file on save • Ability to Minify • Reports error line number for failed compiles • Growl Notifications Source: http://incident57.com/less/

Slide 21

Slide 21 text

LESS.js • 40 times faster than Ruby (gem) • Caches generated CSS to local storage (newer browsers only)

Slide 22

Slide 22 text

LESS.js Code Source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/

Slide 23

Slide 23 text

Live Watch • Only do this in development environment! less.env = "development"; less.watch(); Source: http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/

Slide 24

Slide 24 text

TextMate Bundle • Syntax Highlighting • On Save, produces parsed CSS • https://github.com/appden/less.tmbundle

Slide 25

Slide 25 text

LESS Examples

Slide 26

Slide 26 text

Mixins

Slide 27

Slide 27 text

Rounded .roundedExpanded(@radius: 3px, @tl: 0, @tr: 0, @br: 0, @bl: 0) { // Webkit -webkit-border-top-right-radius: @radius + @tr; -webkit-border-top-left-radius: @radius + @tl; -webkit-border-bottom-right-radius: @radius + @br; -webkit-border-bottom-left-radius: @radius + @bl; // Firefox -moz-border-radius-topleft: @radius + @tl; -moz-border-radius-topright: @radius + @tr; -moz-border-radius-bottomright: @radius + @br; -moz-border-radius-bottomleft: @radius + @bl; // Implemented Standard border-top-right-radius: @radius + @tr; border-top-left-radius: @radius + @tl; border-bottom-right: @radius + @br; border-bottom-left: @radius + @bl; } // Basic Rounded Corner .rounded(@radius: 3px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }

Slide 28

Slide 28 text

Gradient .gradient (@start: #ffffff, @end: #EDEDED){ background: @start; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -moz-linear-gradient(-90deg, @start, @end); filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); /* IE6 & 7 */ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); /* IE8 */ }

Slide 29

Slide 29 text

Shadow .shadow(@x: 3px, @y: 3px, @blur: 5px, @color: #333) { box-shadow: @x @y @blur @color; -moz-box-shadow: @x @y @blur @color; -webkit-box-shadow: @x @y @blur @color; }

Slide 30

Slide 30 text

Import (include) @import 'css3'; @import 'buttons'; @import 'theme'; @import 'reset';

Slide 31

Slide 31 text

Operators @base_font: 24px; @base_color: #5b8cff; h1 { color: @base_color; font-size: @base_font; } h2 { color: @base_color - #333; font-size: @base_font * 0.8; } h3 { color: @base_color + #333; font-size: @base_font * 0.7; } h4 { color: @base_color + #666; font-size: @base_font * 0.6; } // Output h1{color:#5b8cff;font-size:24px;} h2{color:#2859cc;font-size:19.200000000000003px;} h3{color:#8ebfff;font-size:16.799999999999997px;} h4{color:#c1f2ff;font-size:14.399999999999999px;}

Slide 32

Slide 32 text

Grid Layout @unit: @pageWidth / 24; // Grid Margin @gm: 10px; .g(@u: 20px, @margin: @gm, @marginTop: 0, @marginBottom: 0) { // Scope Variables .gpadding: @gpadding + 0; .gborder: @gborder + 0; display: inline; float: left; margin: @marginTop @margin @marginBottom @margin; width: (@u * @unit) - ((@margin * 2) + @gpadding + @gborder); } .shift(@pu: -20px){ left: @pu * @unit; position: relative; } .newRow { clear: left; } Source: http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/

Slide 33

Slide 33 text

Grid Layout Cont. h1 { .gpadding: 6; .g(6); .header(); } #site-navigation { padding: 0; .g(18, 0); li { background: @color2; padding: @gm / 2; @gpadding: @gm; .g(3, @gm, @gm); &.selected { background: @color4; } } a { color: #FFF; text-decoration: none; } } Source: http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/

Slide 34

Slide 34 text

With Great Power Comes Great Responsibility

Slide 35

Slide 35 text

Nest for need // Unecessary Nesting .wrapper { section.page { .container { aside { width: 440px; a { display: block; font-size: 0.9em; padding: 3px; text-decoration: none; } } } } } // Outputs .wrapper section.page .container aside a { display: block; font-size: 0.9em; padding: 3px; text-decoration: none; } // Could easily and more efficiently be aside a { display: block; font-size: 0.9em; padding: 3px; text-decoration: none; }

Slide 36

Slide 36 text

Gotchas! • LESS.app is not always using the latest version of LESS.js • LESS.js is still officially BETA • Only caches output when live, not local machine (text/less only) • Chrome local development is broken

Slide 37

Slide 37 text

Resource Links • http://fadeyev.net/2010/06/19/lessjs-will-obsolete- css/ • http://lesscss.org/docs • http://net.tutsplus.com/tutorials/html-css- techniques/quick-tip-you-need-to-check-out-less- js/ • http://incident57.com/less/

Slide 38

Slide 38 text

Questions? Concerns? Complaints?

Slide 39

Slide 39 text

Thanks for listening! Contact Information [t]: @jakefolio [e]: [email protected] [w]: http://www.jakefolio.com [irc]: #dallasphp