LESS is more

LESS is more – How to get more fun out of your CSS
Willem Meints
willemm@infosupport.com
Lead Developer
Info 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;
background-color: #428bca;
outline: 0;
}

• You write almost everything at least twice
3
.dropdown-menu > li > a:focus {
color: #ffffff;
}
.dropdown-menu > a:focus {
color: #ffffff;
outline: 0;
}

• You need to calculate everything yourself
4
body {
font-size: 14px;
line-height: 1.428571429;
}
.btn-primary {
}
.btn-primary:hover {
background-color: #3276b1;
}

• 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 {
a:hover i.icon-edit {
}
}
}

• 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 “.BootstrapBootstrap.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).webcompilerWebCompilerTasks.targets"/>

LESS is more

More Related Content

Similar to LESS is more

Recently uploaded

LESS is more