LESS is more

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


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


.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


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


• Use variables for colors, fonts, sizes:

6


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


// 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


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


• Use math to define sizes for elements

10


body { font-size: 14px; line-height: (20px / 14px);}

• Use color functions to define new colors

11


@button-color: blue;@button-active-color: lighten(@button-color,10%);@button-hover-color: rotate(@button-color,10);

• Make relative sizes super easy

12


@font-size: convert(14px,em);@heading-size: unit(14px,pt);

• Build LESS libraries and get more.

13


• Create LESS from more files

14


@import “.\Bootstrap\Bootstrap.less”;@import “Variables.less”;@import “reset.css”;

• LESS namespaces, more fun.

15


#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


.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


• LESS code, live in your website.

18


<head> <script src=“less.js”></script> <link rel=“stylesheet/less” type=“text/css” href=“mystyles.less”/></head>

• LESS Files inside your VS2012 solution

19


• LESS compiling in your nightly build

20


<Import Project=“$(SolutionDir)\.webcompiler\WebCompilerTasks.targets"/>

LESS is more

Technology

Transcript of LESS is more