less, the css preprocessor

LESS, The CSS Preprocessor

Andrea Tarr MetaScale /Sears Holdings

Joomla Day New England 2013

What is LESS Using LESS LESS in Joomla

April 13, 2013 JDNE: LESS, The CSS Preprocessor 2

Dynamic CSS Easy Customization Reuse Power of Variables

April 13, 2013 JDNE: LESS, The CSS Preprocessor 3

Dynamic CSS Super set of CSS

.LESS

April 13, 2013 JDNE: LESS, The CSS Preprocessor 4

Preprocessing Client Side http://lesscss.org

April 13, 2013 JDNE: LESS, The CSS Preprocessor 5

<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script>

April 13, 2013 JDNE: LESS, The CSS Preprocessor 6

Preprocessing Server Side http://leafo.net/lessphp http://nodejs.org

April 13, 2013 JDNE: LESS, The CSS Preprocessor 7

1. Install node.js http://nodejs.org 2. Install LESS sudo npm install -g less 3. Process CSS files lessc ../less/template.less > template.css

April 13, 2013 JDNE: LESS, The CSS Preprocessor 8

Why LESS not SASS? Faster JavaScript CSS Syntax

April 13, 2013 JDNE: LESS, The CSS Preprocessor 9

Variables Define once, use often

April 13, 2013 JDNE: LESS, The CSS Preprocessor 10

@

@text-color: #2c2c2c; p { color: @text-color;

}

April 13, 2013 JDNE: LESS, The CSS Preprocessor 11

h2 { color: @text-color; border: 1px solid

@text-color; }

April 13, 2013 JDNE: LESS, The CSS Preprocessor 12

Mixins Shorthand classes

April 13, 2013 JDNE: LESS, The CSS Preprocessor 13

.

.rounded { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

April 13, 2013 JDNE: LESS, The CSS Preprocessor 14

.sideboxa { .rounded;

} .sideboxb { padding: 5px; .rounded;

}

April 13, 2013 JDNE: LESS, The CSS Preprocessor 15

Mixins Parameters

April 13, 2013 JDNE: LESS, The CSS Preprocessor 16

()

.rounded (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }

April 13, 2013 JDNE: LESS, The CSS Preprocessor 17

.sideboxa { .rounded;

} .sideboxb { padding: 5px; .rounded(3px);

}

April 13, 2013 JDNE: LESS, The CSS Preprocessor 18

Operations Math!

April 13, 2013 JDNE: LESS, The CSS Preprocessor 19

+ - * / ()

@base-margin: 15px; @base: 5%; @filler: (@base * 2); .box1 {

margin-bottom: (@base-margin + 20px);

height: (100% / 2 + @filler); }

April 13, 2013 JDNE: LESS, The CSS Preprocessor 20

@link-color: #3f43ca; a { color: @link-color;

} a:hover { color: (@link-color +

#222); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 21

Functions Built-in

April 13, 2013 JDNE: LESS, The CSS Preprocessor 22

()

@link-color: #3f43ca; a { color: @link-color;

} a:hover { color: lighten(@link-

color, 10%; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 23

lighten(@color, 10%); darken(@color, 10%); saturate(@color, 10%); desaturate(@color, 10%); fadein(@color, 10%); spin(@color, 10);

April 13, 2013 JDNE: LESS, The CSS Preprocessor 24

Comments CSS Style Included

April 13, 2013 JDNE: LESS, The CSS Preprocessor 25

/* */

/* Header styles for blog pages */

April 13, 2013 JDNE: LESS, The CSS Preprocessor 26

Comments Single line Not included

April 13, 2013 JDNE: LESS, The CSS Preprocessor 27

//

// Override from template

April 13, 2013 JDNE: LESS, The CSS Preprocessor 28

@import CSS files LESS files

April 13, 2013 JDNE: LESS, The CSS Preprocessor 29

@

@import "variables.less"; @import "mixins.less"; @import "layout.less"; @import "grid.less"; Compiles to single file

April 13, 2013 JDNE: LESS, The CSS Preprocessor 30

Nesting

April 13, 2013 JDNE: LESS, The CSS Preprocessor 31

{ . { } &{ } }

#header { color: #2c2c2c; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: underline; }

April 13, 2013 JDNE: LESS, The CSS Preprocessor 32

#header { color: #2c2c2c; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration:

underline; } } }

April 13, 2013 JDNE: LESS, The CSS Preprocessor 33

Debug Issues Firebug gives CSS line Search LESS files for multiple selectors Doesn't work when nested

April 13, 2013 JDNE: LESS, The CSS Preprocessor 34

LESS in Joomla

April 13, 2013 JDNE: LESS, The CSS Preprocessor 35

You don't need LESS for Joomla templates April 13, 2013 JDNE: LESS, The CSS Preprocessor 36

Joomla Bootstrap files are already compiled Some Bootstrap template vendors don't distribute LESS files

April 13, 2013 JDNE: LESS, The CSS Preprocessor 37

You don't need LESS in Joomla ... but it's very helpful!

April 13, 2013 JDNE: LESS, The CSS Preprocessor 38

Joomla JUI files media jui css fonts img js less

April 13, 2013 JDNE: LESS, The CSS Preprocessor 39

media/jui/less accordion.less alerts.less bootstrap-extended.less bootstrap-rtl.less bootstrap.less breadcrumbs.less button-groups.less buttons.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 40

carousel.less close.less code.less component-animations.less dropdowns.less forms.less grid.less hero-unit.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 41

icomoon.less labels-badges.less layouts.less mixins.less modals.less navbar.less navs.less pager.less

April 13, 2013 JDNE: LESS, The CSS Preprocessor 42

pagination.less popovers.less progress-bars.less reset.less responsive-1200px-min.less responsive-767px-max.less

April 13, 2013 JDNE: LESS, The CSS Preprocessor 43

responsive-768px-979px.less responsive-navbar.less responsive-utilities.less responsive.less scaffolding.less sprites.less tables.less thumbnails.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 44

tooltip.less type.less utilities.less variables.less wells.less

April 13, 2013 JDNE: LESS, The CSS Preprocessor 45

JUI Extensions bootstrap-extended.less

April 13, 2013 JDNE: LESS, The CSS Preprocessor 46

Bootstrap.less contains @imports of other less files. Replace bootstrap.less with template.less in your template.

April 13, 2013 JDNE: LESS, The CSS Preprocessor 47

mytemplate css template.css html images less template.less variables.less index.php

April 13, 2013 JDNE: LESS, The CSS Preprocessor 48

variables.less Sets up variables for your template Copy file from media/jui/less and change it in your template

April 13, 2013 JDNE: LESS, The CSS Preprocessor 49

variables.less @bodyBackground: #ffffff; @textColor: #2c2c2c; @linkColor: #08c08d; @linkColorHover: darken(@linkColor, 15%); @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; April 13, 2013 JDNE: LESS, The CSS Preprocessor 50

template.less @import less files from media/jui/less @import any less files in your template Add styles for your template using less

April 13, 2013 JDNE: LESS, The CSS Preprocessor 51

Remember, straight CSS is valid LESS. Add in LESS where it is helpful. Ignore it where it would be confusing. April 13, 2013 JDNE: LESS, The CSS Preprocessor 52

template.less @import "../../../media/jui/less/reset.less"; @import "variables.less"; @import "../../../media/jui/less/mixins.less"; @import "../../../media/jui/less/scaffolding.less"; etc... April 13, 2013 JDNE: LESS, The CSS Preprocessor 53

template.less (con't) @import "../../../media/jui/less/bootstrap-extended.less"; Has to be after the other Bootstrap @imports to override when necessary

April 13, 2013 JDNE: LESS, The CSS Preprocessor 54

template.less (con't) After the imports, add your styles .img_caption .right { float: right; margin-left: 1em;

}

April 13, 2013 JDNE: LESS, The CSS Preprocessor 55

Compile template.less lessc ../less/template.less > template.css Call the template.css file in your index.php file as usual.

April 13, 2013 JDNE: LESS, The CSS Preprocessor 56

Questions?

April 13, 2013 JDNE: LESS, The CSS Preprocessor 57