Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LESS is more

271 views

Published on

A lightning talk on how to use LESS to improve your CSS skills. Explains wow you can write less code using variables, mixins and functions. Also shows what you can do with less during the build.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

LESS is more

  1. 1. LESS is more – How to get more fun out of your CSS Willem Meints willemm@infosupport.com Lead Developer Info Support [PIC]
  2. 2. • CSS Development sucks (most of the time). – I will teach you to do LESS and get more 1 Info Support PechaKucha
  3. 3. • Nested rules really suck 2 Info Support PechaKucha ul.shopping-list.complete span.item-actions a:hover i.icon-remove { text-decoration: none; } .dropdown-menu > .active > a:focus { color: #ffffff; text-decoration: none; background-color: #428bca; outline: 0; }
  4. 4. • You write almost everything at least twice 3 Info Support PechaKucha .dropdown-menu > li > a:focus { color: #ffffff; text-decoration: none; background-color: #428bca; } .dropdown-menu > a:focus { color: #ffffff; text-decoration: none; background-color: #428bca; outline: 0; }
  5. 5. • You need to calculate everything yourself 4 Info Support PechaKucha body { font-size: 14px; line-height: 1.428571429; } .btn-primary { background-color: #428bca; } .btn-primary:hover { background-color: #3276b1; }
  6. 6. • Stop repeating yourself, start doing LESS today 5 Info Support PechaKucha
  7. 7. • Use variables for colors, fonts, sizes: 6 Info Support PechaKucha body { font-family: @font-family-base; font-size: @font-size-base; line-height: @line-height-base; color: @text-color; background-color: @body-bg; }
  8. 8. • Create mix-ins to build patterns 7 Info Support PechaKucha // Clearfix mix-in, makes sure that float settings are fixed. .clearfix() { &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ } &:after { clear: both; } } .element { .clearfix(); } Call mix-ins like methods! Define like CSS classes
  9. 9. • Nest rules to make things easy to remember 8 Info Support PechaKucha ul.shopping-list { border-left: 1px solid @gray-lighter; border-top: 1px solid @gray-lighter; border-right: 1px solid @gray-lighter; span.item-actions { text-decoration: none; a:hover i.icon-edit { text-decoration: none; } } }
  10. 10. • Stop calculating everything, LESS calculations are better and easier. 9 Info Support PechaKucha
  11. 11. • Use math to define sizes for elements 10 Info Support PechaKucha body { font-size: 14px; line-height: (20px / 14px); }
  12. 12. • Use color functions to define new colors 11 Info Support PechaKucha @button-color: blue; @button-active-color: lighten(@button-color,10%); @button-hover-color: rotate(@button-color,10);
  13. 13. • Make relative sizes super easy 12 Info Support PechaKucha @font-size: convert(14px,em); @heading-size: unit(14px,pt);
  14. 14. • Build LESS libraries and get more. 13 Info Support PechaKucha
  15. 15. • Create LESS from more files 14 Info Support PechaKucha @import “.BootstrapBootstrap.less”; @import “Variables.less”; @import “reset.css”;
  16. 16. • LESS namespaces, more fun. 15 Info Support PechaKucha #namespace { .bordered-section(@color) { background-color: lighten(@color,50%); border: 1px solid @color; } } .main-section { #namespace > .bordered-section(red); }
  17. 17. • Build a gridsystem with LESS code. 16 Info Support PechaKucha .grid-col(@span,@numcols) { width: percentage(@span/@numcols); } .grid-generator(@span: 12, @numcols: 12, @mq: '') when (@span > 0) { (~".@{mq}g-@{span}-@{numcols}") { .grid-col(@span, @numcols); } .grid-generator(@span - 1,@numcols,@mq); } .grid-generator();
  18. 18. • Use LESS stuff in your dev environment. 17 Info Support PechaKucha
  19. 19. • LESS code, live in your website. 18 Info Support PechaKucha <head> <script src=“less.js”></script> <link rel=“stylesheet/less” type=“text/css” href=“mystyles.less”/> </head>
  20. 20. • LESS Files inside your VS2012 solution 19 Info Support PechaKucha
  21. 21. • LESS compiling in your nightly build 20 Info Support PechaKucha <Import Project=“$(SolutionDir).webcompilerWebCompilerTasks.targets"/>

×