less is more
DESCRIPTION
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.TRANSCRIPT
LESS is more – How to get more fun out of your CSS
Willem [email protected]
Lead DeveloperInfo Support
[PIC]
• CSS Development sucks (most of the time).
– I will teach you to do LESS and get more
1
Info Support PechaKucha
• 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;}
• 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;}
• 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;}
¿20𝑝𝑥14𝑝𝑥
=h h𝑙𝑖𝑛𝑒 𝑒𝑖𝑔 𝑡
𝑓𝑜𝑛𝑡𝑠𝑖𝑧𝑒
• Stop repeating yourself, start doing LESS today
5
Info Support PechaKucha
• 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;}
• 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
• 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; } }}
• Stop calculating everything, LESS calculations are better and easier.
9
Info Support PechaKucha
• Use math to define sizes for elements
10
Info Support PechaKucha
body { font-size: 14px; line-height: (20px / 14px);}
• 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);
• Make relative sizes super easy
12
Info Support PechaKucha
@font-size: convert(14px,em);@heading-size: unit(14px,pt);
• Build LESS libraries and get more.
13
Info Support PechaKucha
• Create LESS from more files
14
Info Support PechaKucha
@import “.\Bootstrap\Bootstrap.less”;@import “Variables.less”;@import “reset.css”;
• 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);}
• 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();
• Use LESS stuff in your dev environment.
17
Info Support PechaKucha
• 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>
• LESS Files inside your VS2012 solution
19
Info Support PechaKucha
• LESS compiling in your nightly build
20
Info Support PechaKucha
<Import Project=“$(SolutionDir)\.webcompiler\WebCompilerTasks.targets"/>