LESS CSS

The power to take advantage
of dynamic behavior

b
Agenda
• What is {Less}?
• Why {Less}?
• Implementation of {Less} in websites.
• Comparison between Less and Sass
• Overview of the syntax with examples.

b
What is {Less}?
• Dynamic style sheet language designed by Alexis Sellier from
Berlin - @cloudhead.
• Open source - Apache 2 License.
• Less was designed as a Nested metalanguage
- valid CSS is valid Less code with the same semantics.
• Less can run client-side (IE8+, WebKit, Firefox).
• Less can run server-side (Node.js).
• Less can be pre-compiled into CSS.
• First version of was written in Ruby but this was replaced by a
JavaScript version.

b
Why {Less}?
• Save time
• Reduce mistakes
• Reduce repetition
• It makes logical sense to break out CSS into multiple files
• More Readability

b
Implementation of {Less} in
websites.
• Let the website convert the Less code to CSS on the fly by
including the less.js file – available from http://www.lesscss.org
• Download less.js from www.lesscss.org
• Add your Less CSS code to a text file with a .less extension eg.
styles.less
• Include less.js with your styles:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

b
Comparison between Less and Sass
• Sass is more mature and has slightly more features[compass ]
• They are pre-processed differently:
• Less uses JavaScript and can run client-side.
• Sass uses Ruby so runs server-side.
• Less can be slower to compile on the fly when running client-
side.
• Both can be pre-compiled into pure CSS before uploading
style sheets to sites – meaning no difference in performance.
• Syntax - https://gist.github.com/674726
• https://gist.github.com/wilmoore/820035
• http://www.hongkiat.com/blog/sass-vs-less/
•
http://www.quora.com/Which-is-better-Less-Compass-or-Sass

b
Less CSS compilers
Respectively all major editors can be used for writing
{Less}
• Free compiler for mac –
http://incident57.com/less
• Free compiler for mac, pc, Linux –
http://wearekiss.com/simpless
http://winless.org/online-less-compiler
WinLess
Crunch!
Mixture
Adobe Dream Weaver
Notepad++
Sublime Text 2
Kineticwing IDE
Coda
Geany

b
Syntax with examples.
-LESS has everything that CSS is missing. {Less} allows the
dynamic editability options for dynamic stylesheet with help of
these
• Variables
• Mixins
• Cascading + Nesting
• &combinator
• Operations
• Comments
• @import
• String interpolation
• Escaping
• Namespaces
• Scope
• Extend
• Loops

b
Variables
• Start with @ symbol
• Can storehexadecimalcolors, e.g. #333 or #fefefe
• Can store strings, e.g. “Webucator, Inc.”
• Can store sizes, e.g. 10px
LESS Syntax CSS Output
// Declare a numeric variable
@red: #ff0000;
// Declare a string variable
@path: "/sites/default/files/images";
// Apply these variables
.block {
color: @red;
background:url('@{path}/mypic.jpg');
}
.block {
color: #ff0000;
background: url('/sites/default/
files/images/mypic.jpg');
}

b
Mixins
• Include properties from one ruleset to another
• Reuse code
• Can accept parameters
• Can define default value for parameters
• @arguments is a special variable that contains the ordered
value stored in all parameters
.border-radius(@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
@gray: #333;
header > nav {
border:1px solid @gray;
.border-radius;
}
aside > nav {
.border-radius(5px);
}
header > nav {
border:1px solid #333;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
aside > nav {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

b
Cascading + Nesting
• Nest rulesets in place of cascading
• Can be used in combination with traditional cascading
approach
• Mimics your DOM structure
• Outputs to cascading rulesets
LESS Syntax LESS Nesting
header {
color: white;
}
header .logo {
width:300px;
float:left;
}
header > #searchcontainer {
width:300px;
float:right;
}
header > #searchcontainer input {
width:250px;
margin-right:6px;
color:@darkGray;
}
header > #searchcontainer input:focus
{
color:@lightGray;
}
header {
color: white;
.logo {
width:300px;
float:left;
}
#searchcontainer {
width:300px;
float:right;
input {
width:250px;
margin-right:6px;
color:@darkGray;
&:focus {
color:@lightGray;
}
}
}
}

b
&combinator
• Nested selector is concatenated to the parent selector
• Useful for pseudo-classes
• &:hover
• &:focus
@gray: #333;
img {
border:none;
&:focus {
border:1px solid @gray;
}
@.inline {
display:inline;
}
}
img {
border:none;
}
img:focus {
border:1px solid #333;
}
img.inline {
display:inline;
}

b
Operations
- which let you create CSS properties mathematically.
• Any number, color or variable can be operated upon
• Math functions
• Math operators ( +, -, *, /)
• Color functions
@padding: 2px;
figure {
padding:@padding;
img {
padding:@padding * 2;
}
figcaption {
padding:@padding + 4px;
}
}
figure {
padding:2px;
}
figure img {
padding:4px;
}
figure figcaption {
padding: 6px;
}

b
Comments
Comments are pretty straight-forward in LESS. Multiline
comments are preserved and included in the CSS output when
you compile the LESS, and single line comments are not
preserved. Therefore, you should generally use single line
comments, unless you really need the comment to be included
in the generated CSS.
• /* These comments are preserved into your compiled CSS */
• // These comments are silent

b
@import
• @import will compile and copy result into single file
• All variables and mixins are available to main file or files
imported after declarations
• Order matters
• Can include/ignore .less extension
• Can import “classic” css using .css extension
• You can break out files logically, but avoid the (terrible)
@import() statement in traditional CSS
LESS @IMPORT Syntax
// 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";
}

b
String Interpolation
• Use @{name} construct
• For embedding variable values within declarations
@baseUrl: “http://www.webucator.com/”;
@imageUri: “images/”;
background-image: url(‘@{baseUrl}@{imageUri}bg.png’);
background-image: url(‘http://www.webucator.com/images/bg.png’);

b
Namespaces
- Groups of styles that can be called by references.
- Very useful if you want to create your own CSS libraries or
distribute CSS
#my_framework{
p{
margin:12px 0;
}
a{
color:blue;
text-decoration:none;
}
.submit{
background:red;
color:white;
padding:5px 12px;
}
}
.submit_button{
#my_framework > .submit;
}
#my_framework p{
margin:12px 0;
}
#my_framework a{
color:blue;
text-decoration:none;
}
#my_framework .submit{
background:red;
color:white;
padding:5px 12px;
}
.submit_button{
background:red;
color:white;
padding:5px 12px;
}

b
Scope
- Scope in Less is very similar to that of programming
languages. Variables and mixins are first looked for locally, and
if they aren't found, the compiler will look in the parent scope,
and so on.
LESS Scope Syntax
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}

b
Extend
- Extend is a Less pseudo-class which merges the selector it is
put on with ones that match what it references.
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}

b
Loops
- Creating loops
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next
iteration
width: (10px * @counter); // code for
each iteration
}
div {
.loop(5); // launch the loop
}
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
.generate-columns(4);
.generate-columns(@n, @i: 1) when
(@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}

b
My Perspective
• It's easy to install, you can use a JavaScript file for client side
compiling during development, and there are several ways to
compile the less files to CSS server side for production.
• Syntax very close to original CSS.
• Easy to Understand
In the end, it is still up to the end-user’s decision to pick the
preprocessor of their choice. Be it Sass or LESS, as long as they are
comfortable and more productive.

b
References
• http://lesscss.org/features/
•
http://css-tricks.com/snippets/javascript/lighten-darken-color/
•
https://stackoverflow.com/questions/21821947/calculate-differen
• https://github.com/less/less.js/archive/master.zip
• http://www.lesscss.org
• http://leafo.net/lessphp
• http://sass-lang.com
• https://github.com/cloudhead
• http://en.wikipedia.org/wiki/LESS_(stylesheet_language)
• http://coding.smashingmagazine.com/2011/09/09/an-
introduction-to-less-and-comparison-to-sass

LESS CSS

More Related Content

What's hot (20)

Similar to LESS CSS (20)

Recently uploaded (20)

LESS CSS