less, the css preprocessor
DESCRIPTION
LESS is a dynamic stylesheet language. It extends CSS with dynamic behavior such as variables, mixins, operations and functions. Imagine being able to define a color one time and then use it in multiple places. To be able to say, "Take that background color and have it darken by 20% when I hover over it." Imagine being able to use rounded corners without needing to remember and write the styles for all the different browsers, to be able to create gradients in CSS by just telling it the colors you want to use. This session will introduce you to LESS, show you how to use it, and walk you through how to set up the software to use it. Since this is an extension of CSS, you should know some CSS. The examples will be taken from Bootstrap and Joomla JUI so having basic knowledge of that is helpful.TRANSCRIPT
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