LESS, the CSS Preprocessor
-
Upload
andrea-tarr -
Category
Technology
-
view
1.910 -
download
0
description
Transcript of LESS, the CSS Preprocessor
![Page 1: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/1.jpg)
LESS, The CSS Preprocessor
Andrea Tarr MetaScale /Sears Holdings
Joomla Day New England 2013
![Page 2: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/2.jpg)
What is LESS Using LESS LESS in Joomla
April 13, 2013 JDNE: LESS, The CSS Preprocessor 2
![Page 3: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/3.jpg)
Dynamic CSS Easy Customization Reuse Power of Variables
April 13, 2013 JDNE: LESS, The CSS Preprocessor 3
![Page 4: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/4.jpg)
Dynamic CSS Super set of CSS
.LESS
April 13, 2013 JDNE: LESS, The CSS Preprocessor 4
![Page 5: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/5.jpg)
Preprocessing Client Side http://lesscss.org
April 13, 2013 JDNE: LESS, The CSS Preprocessor 5
![Page 6: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/6.jpg)
<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
![Page 7: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/7.jpg)
Preprocessing Server Side http://leafo.net/lessphp http://nodejs.org
April 13, 2013 JDNE: LESS, The CSS Preprocessor 7
![Page 8: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/8.jpg)
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
![Page 9: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/9.jpg)
Why LESS not SASS? Faster JavaScript CSS Syntax
April 13, 2013 JDNE: LESS, The CSS Preprocessor 9
![Page 10: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/10.jpg)
Variables Define once, use often
April 13, 2013 JDNE: LESS, The CSS Preprocessor 10
@
![Page 11: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/11.jpg)
@text-color: #2c2c2c; p { color: @text-color;
}
April 13, 2013 JDNE: LESS, The CSS Preprocessor 11
![Page 12: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/12.jpg)
h2 { color: @text-color; border: 1px solid
@text-color; }
April 13, 2013 JDNE: LESS, The CSS Preprocessor 12
![Page 13: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/13.jpg)
Mixins Shorthand classes
April 13, 2013 JDNE: LESS, The CSS Preprocessor 13
.
![Page 14: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/14.jpg)
.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
![Page 15: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/15.jpg)
.sideboxa { .rounded;
} .sideboxb { padding: 5px; .rounded;
}
April 13, 2013 JDNE: LESS, The CSS Preprocessor 15
![Page 16: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/16.jpg)
Mixins Parameters
April 13, 2013 JDNE: LESS, The CSS Preprocessor 16
()
![Page 17: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/17.jpg)
.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
![Page 18: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/18.jpg)
.sideboxa { .rounded;
} .sideboxb { padding: 5px; .rounded(3px);
}
April 13, 2013 JDNE: LESS, The CSS Preprocessor 18
![Page 19: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/19.jpg)
Operations Math!
April 13, 2013 JDNE: LESS, The CSS Preprocessor 19
+ - * / ()
![Page 20: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/20.jpg)
@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
![Page 21: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/21.jpg)
@link-color: #3f43ca; a { color: @link-color;
} a:hover { color: (@link-color +
#222); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 21
![Page 22: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/22.jpg)
Functions Built-in
April 13, 2013 JDNE: LESS, The CSS Preprocessor 22
()
![Page 23: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/23.jpg)
@link-color: #3f43ca; a { color: @link-color;
} a:hover { color: lighten(@link-
color, 10%; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 23
![Page 24: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/24.jpg)
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
![Page 25: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/25.jpg)
Comments CSS Style Included
April 13, 2013 JDNE: LESS, The CSS Preprocessor 25
/* */
![Page 26: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/26.jpg)
/* Header styles for blog pages */
April 13, 2013 JDNE: LESS, The CSS Preprocessor 26
![Page 27: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/27.jpg)
Comments Single line Not included
April 13, 2013 JDNE: LESS, The CSS Preprocessor 27
//
![Page 28: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/28.jpg)
// Override from template
April 13, 2013 JDNE: LESS, The CSS Preprocessor 28
![Page 29: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/29.jpg)
@import CSS files LESS files
April 13, 2013 JDNE: LESS, The CSS Preprocessor 29
@
![Page 30: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/30.jpg)
@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
![Page 31: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/31.jpg)
Nesting
April 13, 2013 JDNE: LESS, The CSS Preprocessor 31
{ . { } &{ } }
![Page 32: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/32.jpg)
#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
![Page 33: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/33.jpg)
#header { color: #2c2c2c; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration:
underline; } } }
April 13, 2013 JDNE: LESS, The CSS Preprocessor 33
![Page 34: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/34.jpg)
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
![Page 35: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/35.jpg)
LESS in Joomla
April 13, 2013 JDNE: LESS, The CSS Preprocessor 35
![Page 36: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/36.jpg)
You don't need LESS for Joomla templates April 13, 2013 JDNE: LESS, The CSS Preprocessor 36
![Page 37: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/37.jpg)
Joomla Bootstrap files are already compiled Some Bootstrap template vendors don't distribute LESS files
April 13, 2013 JDNE: LESS, The CSS Preprocessor 37
![Page 38: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/38.jpg)
You don't need LESS in Joomla ... but it's very helpful!
April 13, 2013 JDNE: LESS, The CSS Preprocessor 38
![Page 39: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/39.jpg)
Joomla JUI files media jui css fonts img js less
April 13, 2013 JDNE: LESS, The CSS Preprocessor 39
![Page 40: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/40.jpg)
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
![Page 41: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/41.jpg)
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
![Page 42: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/42.jpg)
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
![Page 43: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/43.jpg)
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
![Page 44: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/44.jpg)
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
![Page 45: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/45.jpg)
tooltip.less type.less utilities.less variables.less wells.less
April 13, 2013 JDNE: LESS, The CSS Preprocessor 45
![Page 46: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/46.jpg)
JUI Extensions bootstrap-extended.less
April 13, 2013 JDNE: LESS, The CSS Preprocessor 46
![Page 47: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/47.jpg)
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
![Page 48: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/48.jpg)
mytemplate css template.css html images less template.less variables.less index.php
April 13, 2013 JDNE: LESS, The CSS Preprocessor 48
![Page 49: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/49.jpg)
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
![Page 50: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/50.jpg)
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
![Page 51: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/51.jpg)
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
![Page 52: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/52.jpg)
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
![Page 53: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/53.jpg)
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
![Page 54: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/54.jpg)
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
![Page 55: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/55.jpg)
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
![Page 56: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/56.jpg)
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
![Page 57: LESS, the CSS Preprocessor](https://reader033.fdocuments.us/reader033/viewer/2022050905/54876e0db47959d30c8b54cd/html5/thumbnails/57.jpg)
Questions?
April 13, 2013 JDNE: LESS, The CSS Preprocessor 57