@hans2103CSS met LESSwaar begin ik?een presentatie voor de Joomla!dagen21 april 2013 Woudschoten - Zeisthans2103Sunday 21 ...
@hans2103CSS met LESSwaar begin ik?een presentatie voor de Joomla!dagen21 april 2013 Woudschoten - Zeisthans2103presentati...
@hans2103Wat is LESS?• LESS is een programmeertaal• LESS compileer je naar CSS• LESS is een CSS preprocessor• LESS syntax ...
@hans2103Waarom LESS gebruiken• LESS bespaart tijd• LESS vermindert fouten• LESS vermindert herhalingen• LESS is handigSun...
@hans2103Hopsakee...aan de slag!veel codeSunday 21 April 13
@hans2103vooraf compilerenon the fly compileren<link rel="stylesheet/css" href="style.css" /><link rel="stylesheet/less" h...
@hans2103style.less// LESS// import normalize for CSS resets@import "normalize";// same as @import “normalize.less”;// imp...
@hans2103@hans2103#apt-get install node-lesshttp://winless.orghttp://incident57.com/codekitSunday 21 April 13
@hans2103clean structure with nesting/* Compiled CSS */#header {}#header #nav {}#header #nav ul {}#header #nav ul li {}#he...
@hans2103clean structure with nesting/* Compiled CSS */a {}a:hover {}a:active {}a:visited {}// LESSa {&:hover {}&:active {...
@hans2103variablesstandaard waarden om te hergebruiken in de stylesheet.// LESS@color: #4D926F;@serif: serif;@sans-serif: ...
@hans2103mixinsGebruik de waarden van een gehele class in een andere class.// LESS.bordered {border-top: dotted 1px black;...
@hans2103parametric mixinsparameters verwerkt in mixins// LESS.rounded-corners (@radius: 5px) {-webkit-border-radius: @rad...
@hans2103operations (simple mathematical operators: + - * / )// LESS.font-size(@font-size: 16){@remValue: (@font-size / 10...
@hans2103operations (simple mathematical operators: + - * / )// LESS@the-border: 2px;@base-color: #111;#header {color: (@b...
@hans2103// LESSescape(@string); // URL encodes a stringe(@string); // escape string content%(@string, values...); // form...
@hans2103functions - darken & lighten// LESS.background_gradient(@base) {background: @base;background: -webkit-gradient(li...
@hans2103functions - darken & lighten/* Compiled CSS */.orange {background: #f78d1d;background: -webkit-gradient(linear,le...
@hans2103functions - escaping// LESS.background_gradient(@base) {background-color: @base;background-image: -webkit-gradien...
@hans2103functions - escaping/* Compiled CSS */.orange {background-color: #f78d1d;background-image: -webkit-gradient(linea...
@hans2103functions - data-uri// LESSdata-uri(image/jpeg;base64, ../data/image.jpg);/* Compiled CSS */url(data:image/jpeg;b...
@hans2103String interpolation// LESS@baseUrl: "http://joomladagen.nl/";@imageUrl: "images/";background-image: url(@{baseUr...
@hans2103scope// LESSheader {	 @color: black;	 background-color: @color;	 nav {	 	 @color: blue;	 	 background-color: @col...
@hans2103combinatorGebruik de waarden van een gehele class in een andere class.// LESS.bordered, .rounded {&.float {float: l...
@hans2103@hans2103http://leafo.net/lessphp/lessify/Sunday 21 April 13
@hans2103@hans2103http://leafo.net/lessphp/editor.htmlSunday 21 April 13
@hans2103@hans2103Sunday 21 April 13
@hans2103@hans2103Sunday 21 April 13
@hans2103@hans2103Sunday 21 April 13
@hans2103@hans2103Sunday 21 April 13
@hans2103@hans2103Sunday 21 April 13
@hans2103Hopsakee...aan de slag!gewoon beginnenSunday 21 April 13
@hans2103veel plezierSunday 21 April 13
@hans2103http://www.flickr.com/photos/trasimac/1217071176thank you for your time and have funhttp://slideshare.net/hans2103...
Upcoming SlideShare
Loading in...5
×

CSS with LESS for #jd13nl

908

Published on

CSS met Less :: Hoe begin ik? - een presentatie gegeven door Hans Kuijpers tijdens Joomladagen 2013 te Woudschoten, Zeist. #jd13nl
De eerste keer werken met CSS gaf me dezelfde kriebels als nu werken met LESS. Het maakt je leven zo veel makkelijker!

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
908
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS with LESS for #jd13nl

  1. 1. @hans2103CSS met LESSwaar begin ik?een presentatie voor de Joomla!dagen21 april 2013 Woudschoten - Zeisthans2103Sunday 21 April 13
  2. 2. @hans2103CSS met LESSwaar begin ik?een presentatie voor de Joomla!dagen21 april 2013 Woudschoten - Zeisthans2103presentatie kun je downloaden viahttp://slideshare.net/hans2103Sunday 21 April 13
  3. 3. @hans2103Wat is LESS?• LESS is een programmeertaal• LESS compileer je naar CSS• LESS is een CSS preprocessor• LESS syntax is gemaakt vanuit CSS• LESS is dynamisch CSSSunday 21 April 13
  4. 4. @hans2103Waarom LESS gebruiken• LESS bespaart tijd• LESS vermindert fouten• LESS vermindert herhalingen• LESS is handigSunday 21 April 13
  5. 5. @hans2103Hopsakee...aan de slag!veel codeSunday 21 April 13
  6. 6. @hans2103vooraf compilerenon the fly compileren<link rel="stylesheet/css" href="style.css" /><link rel="stylesheet/less" href="style.less" /><script src="less.js"></script>Sunday 21 April 13
  7. 7. @hans2103style.less// LESS// import normalize for CSS resets@import "normalize";// same as @import “normalize.less”;// import mixins@import "mixins";// base for mobile devices@import "base";//tables and small laptops@media only screen and (min-width: 768px) {@import "768up";}//desktop@media only screen and (min-width: 1030px) {@import "1030up";}Sunday 21 April 13
  8. 8. @hans2103@hans2103#apt-get install node-lesshttp://winless.orghttp://incident57.com/codekitSunday 21 April 13
  9. 9. @hans2103clean structure with nesting/* Compiled CSS */#header {}#header #nav {}#header #nav ul {}#header #nav ul li {}#header #nav ul li a {}// LESS# header {#nav {ul {li {a {}}}}}lijkt warempel op de HTML structuurSunday 21 April 13
  10. 10. @hans2103clean structure with nesting/* Compiled CSS */a {}a:hover {}a:active {}a:visited {}// LESSa {&:hover {}&:active {}&:visited {}}Sunday 21 April 13
  11. 11. @hans2103variablesstandaard waarden om te hergebruiken in de stylesheet.// LESS@color: #4D926F;@serif: serif;@sans-serif: sans-serif;#header {color: @color;font-family: @serif;}h2 {color: @color;font-family: @sans-serif;}/* Compiled CSS */#header {color: #4D926F;font-family: serif;}h2 {color: #4D926F;font-family: sans-serif;}Sunday 21 April 13
  12. 12. @hans2103mixinsGebruik de waarden van een gehele class in een andere class.// LESS.bordered {border-top: dotted 1px black;border-bottom: solid 2px black;}#menu a {color: #111;.bordered;}.post a {color: red;.bordered;}/* Compiled CSS */.bordered {border-top: dotted 1px black;border-bottom: solid 2px black;}#menu a {color: #111;border-top: dotted 1px black;border-bottom: solid 2px black;}.post a {color: red;border-top: dotted 1px black;border-bottom: solid 2px black;}@hans2103Sunday 21 April 13
  13. 13. @hans2103parametric mixinsparameters verwerkt in mixins// LESS.rounded-corners (@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;border-radius: @radius;}#header {.rounded-corners;}#footer {.rounded-corners(10px);}/* Compiled CSS */#header {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#footer {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;}@hans2103Sunday 21 April 13
  14. 14. @hans2103operations (simple mathematical operators: + - * / )// LESS.font-size(@font-size: 16){@remValue: (@font-size / 10);font-size: @font-size * 1px;font-size: ~"@{remValue}rem";}html {font-size: 62.5%;}body {.font-size();}h1 {.font-size(24);}/* Compiled CSS */html {font-size: 62.5%;}body {font-size: 16px;font-size: 1.6rem;}h1 {font-size: 24px;font-size: 2.4rem;}http://snook.ca/archives/html_and_css/font-size-with-remSunday 21 April 13
  15. 15. @hans2103operations (simple mathematical operators: + - * / )// LESS@the-border: 2px;@base-color: #111;#header {color: (@base-color * 3);border-top: (@the-border / 2);border-right: (@the-border + 2);border-bottom: (@the-border - 1);border-left: @the-border;}#footer {color: (@base-color + #003300);}/* Compiled CSS */#header {color: #333;border-top: 1px;border-right: 4px;border-bottom: 1px;border-left: 2px;}#footer {color: #114411;}Sunday 21 April 13
  16. 16. @hans2103// LESSescape(@string); // URL encodes a stringe(@string); // escape string content%(@string, values...); // formats a stringunit(@dimension, [@unit: ""]); // remove or change the unit of a dimensioncolor(@string); // parses a string to a colordata-uri([mimetype,] url); // * inlines a resource and falls back to url()ceil(@number); // rounds up to an integerfloor(@number); // rounds down to an integerpercentage(@number); // converts to a %, e.g. 0.5 -> 50%round(number, [places: 0]); // rounds a number to a number of placessqrt(number); // * calculates square root of a numberabs(number); // * absolute value of a numbersin(number); // * sine functionasin(number); // * arcsine - inverse of sine functioncos(number); // * cosine functionacos(number); // * arccosine - inverse of cosine functiontan(number); // * tangent functionatan(number); // * arctangent - inverse of tangent functionfunctions (map one-to-one with Javascript code)@hans2103http://lesscss.org/#referenceSunday 21 April 13
  17. 17. @hans2103functions - darken & lighten// LESS.background_gradient(@base) {background: @base;background: -webkit-gradient(linear, left top, left bottom, from(lighten(@base, 5%)), to(darkenbackground: -moz-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%));}@orange_base: #f78d1d;.orange { .background_gradient(@orange_base);&:hover { .background_gradient(darken(@orange_base, 10%)); }&:active { .background_gradient(lighten(@orange_base, 10%)); }}@blue_base: #7db8db;.blue { .background_gradient(@blue_base);&:hover { .background_gradient(darken(@blue_base, 10%)); }&:active { .background_gradient(lighten(@blue_base, 10%)); }}@hans2103http://lesscss.org/#referenceSunday 21 April 13
  18. 18. @hans2103functions - darken & lighten/* Compiled CSS */.orange {background: #f78d1d;background: -webkit-gradient(linear,left top,left bottom,from(#f89936),to(#f28009));background: -moz-linear-gradient(top,#f89936,#f28009);}.orange:hover {background: #d97308;background: -webkit-gradient(linear,left top,left bottom,from(#f28009),to(#c16607));background: -moz-linear-gradient(top,#f28009,#c16607);}.orange:active {background: #f9a64e;background: -webkit-gradient(linear,left top,left bottom,from(#fab267),to(#f89936));background: -moz-linear-gradient(top,#fab267,#f89936);}.blue {background: #7db8db;background: -webkit-gradient(linear,left top,left bottom,from(#91c3e1),to(#69add5));background: -moz-linear-gradient(top,#91c3e1,#69add5);}@hans2103http://lesscss.org/#referenceSunday 21 April 13
  19. 19. @hans2103functions - escaping// LESS.background_gradient(@base) {background-color: @base;background-image: -webkit-gradient(linear, left top, left bottom, from(lighten(@base, 5%)), to(background-image: -webkit-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%));background-image: -moz-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%));background-image: -o-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%));background-image: linear-gradient(to bottom, lighten(@base, 5%), darken(@base, 5%));filter: e(progid:DXImageTransform.Microsoft.gradient(startColorstr=lighten(@base, 5%), end}@orange_base: #f78d1d;.orange { .background_gradient(@orange_base);&:hover { .background_gradient(darken(@orange_base, 10%)); }&:active { .background_gradient(lighten(@orange_base, 10%)); }}@blue_base: #7db8db;.blue { .background_gradient(@blue_base);&:hover { .background_gradient(darken(@blue_base, 10%)); }&:active { .background_gradient(lighten(@blue_base, 10%)); }}@hans2103http://lesscss.org/#referenceSunday 21 April 13
  20. 20. @hans2103functions - escaping/* Compiled CSS */.orange {background-color: #f78d1d;background-image: -webkit-gradient(linear,left top,left bottom,from(#f89936),to(#f28009));background-image: -webkit-linear-gradient(top,#f89936,#f28009);background-image: -moz-linear-gradient(top,#f89936,#f28009);background-image: -o-linear-gradient(top,#f89936,#f28009);background-image: linear-gradient(to bottom,#f89936,#f28009);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f89936,endColorstr=#f28}.orange:hover {background-color: #f78d1d;background-image: -webkit-gradient(linear,left top,left bottom,from(#f28009),to(#c16607));background-image: -webkit-linear-gradient(top,#f28009,#c16607);background-image: -moz-linear-gradient(top,#f28009,#c16607);background-image: -o-linear-gradient(top,#f28009,#c16607);background-image: linear-gradient(to bottom,#f28009,#c16607);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f28009,endColorstr=#c16}.orange:active {background-color: #f9a64e;@hans2103http://lesscss.org/#referenceSunday 21 April 13
  21. 21. @hans2103functions - data-uri// LESSdata-uri(image/jpeg;base64, ../data/image.jpg);/* Compiled CSS */url(data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==);@hans2103http://lesscss.org/#referenceflinke reductie HTTP-request.voor- en nadelen beschreven in wikihttp://en.wikipedia.org/wiki/Data_URI_scheme#AdvantagesSunday 21 April 13
  22. 22. @hans2103String interpolation// LESS@baseUrl: "http://joomladagen.nl/";@imageUrl: "images/";background-image: url(@{baseUrl}@{imageUrl}logo.png);/* CSS Compilation */background-image: url(http://joomladagen.nl/images/logo.png);@hans2103http://lesscss.org/#referenceSunday 21 April 13
  23. 23. @hans2103scope// LESSheader { @color: black; background-color: @color; nav { @color: blue; background-color: @color; a { color: @color; } } h1 { color: @color; }}@hans2103/* Compiled CSS */header {background-color: black;}header nav {background-color: blue;}header nav a {color: blue;}header h1 {color: black;}Sunday 21 April 13
  24. 24. @hans2103combinatorGebruik de waarden van een gehele class in een andere class.// LESS.bordered, .rounded {&.float {float: left;}.top {margin: 5px;}& + & {color: yellow;}}/* Compiled CSS */.bordered.float,.rounded.float {float: left;}.bordered .top,.rounded .top {margin: 5px;}.bordered + .bordered,.rounded + .rounded {color: yellow;}@hans2103Sunday 21 April 13
  25. 25. @hans2103@hans2103http://leafo.net/lessphp/lessify/Sunday 21 April 13
  26. 26. @hans2103@hans2103http://leafo.net/lessphp/editor.htmlSunday 21 April 13
  27. 27. @hans2103@hans2103Sunday 21 April 13
  28. 28. @hans2103@hans2103Sunday 21 April 13
  29. 29. @hans2103@hans2103Sunday 21 April 13
  30. 30. @hans2103@hans2103Sunday 21 April 13
  31. 31. @hans2103@hans2103Sunday 21 April 13
  32. 32. @hans2103Hopsakee...aan de slag!gewoon beginnenSunday 21 April 13
  33. 33. @hans2103veel plezierSunday 21 April 13
  34. 34. @hans2103http://www.flickr.com/photos/trasimac/1217071176thank you for your time and have funhttp://slideshare.net/hans2103hans2103http://about.me/hans2103Sunday 21 April 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×