Introduction to LESS

Introduction to LESSDYNAMIC STYLESHEET LANGUAGE – COMPILES TO CSS

1

AGENDA 2

#Problems writing plain CSS

#LESS

PROBLEMS WRITING PLAIN CSS 3

#No option for variables

#No option for reusable CSS

#Duplication of Code

#No option to debug CSS code

#No option to perform calculations in CSS

#Hard to maintain even for minor changes

#Imports make request to fetch CSS files

DYNAMIC STYLESHEET LANGUAGES 4

#Better ways to write CSS

#Option for named variables

#Option for creating reusable CSS

#Clear CSS rules cascading

#Option to perform calculations in CSS

#Combine CSS files rather than using import

LESS IS MORE 5

#Compiles to CSS

#Programming features in

CSS

#Feels like writing CSS

#CSS is valid LESS

#LESS on Client

#LESS on Server

#Importing

#Variables

#Functions

#Operations

#Mixins

#Nested Rules#Other features

LESS ON CLIENT 6

<head><link rel=“stylesheet/less” type=“text/css”

href=“home.less” />

<script src=“js/less.js” type=“text/javascript”></script></head>

LESS ON SERVER 7

ASP.NET via NuGet

>install-package dotless

#Preferred More

#Server Support

#Node.js

#ASP.NET

#Rails

#JSP

BASIC LESS 8

@headerFontSize: 16px;

// single line comments

#nestedRules{

.childElements{font-size: @headerFontSize;

}}

LESS VARIABLES 9

@redColor: red;//Named Colors@myFontSize: 4px;

//px Unit@boxLineHeight: 2pt;//pt/em Unit@thatColor: #ffccff;//Hex colors@myFontType: Comic Sans, sans serif; //Strings@comValue: 2px solid green; //Complex strings

Variables are actually constants in LESS. No reassignments.@boxLineHeight: @boxLineHeight + 2; //Doesn’t work

LESS OPERATIONS 10

font-size: 10pt + 2;color: #fff / 4;width: (100% / 4) + 5%;font-size: @myFontSize + 4;color: @myRedColor / 10;

LESS FUNCTIONS - COLORS 11

color: lighten(@myColor, 5%)color: darken(@myColor, 5%)color: saturate(@myColor, 5%)color: desaturate(@myColor, 5%)color: fadein(@myColor, 5%)color: fadeout(@myColor, 5%)color: fade(@myColor, 5%)color: spin(@myColor, 5%)color: mix(@myColor, #fff)

LESS FUNCTIONS - MORE 12

@hue: hue(@myColor);@sat: saturation(@myColor);@light: lightness(@myColor);@alpha: alpha(@myColor);@newColor: hsl(10%, 5%, 30%);

@roundMoney: round(9.99);@topMoney: ceil(19.45);@floorMoney: floor(29.90);@percentMoney: percentage(.5);

LESS MIXINS 13

.rounded_corners(@curveSize) {border-radius: @curveSize;-moz-border-radius: @curveSize;

-webkit-border-radius: @curveSize;}

#myDiv {.rounded-corners(15px);

}

#myBox {.rounded-corners(5px);

}

#Reusable components

#Look like Functions

#Accepts parameters

#Can set default values

#Can be overloaded

LESS MIXINS – DEFAULT VALUE 14

.rounded_corners(@curveSize: 5px) {border-radius: @curveSize;-moz-border-radius: @curveSize;

-webkit-border-radius: @curveSize;}

#myDiv {.rounded-corners(15px);

}

#myBox {.rounded-corners;

}

LESS MIXINS – OVERLOADS 15

.myBoxColor(@myColor) {color: @myColor;

}

.myBoxColor(@myColor, @changePer) {color: darken(@myColor, @changePer);

}

#myDiv {.myBoxColor(#ccc, 20%);

}

LESS MIXINS – GUARDS 16

.myBoxColor(@myColor) when (lightness(@myColor) >= 50%) {color: darken(@myColor, 50%);

}

.myBoxColor(@myColor) when (lightness(@myColor) < 50%) {color: lighten(@myColor, 50%);

}

#myDiv {.myBoxColor(#ccc);

}

LESS MIXINS – TYPE GUARDS 17

.myBoxWidth(@size) when (isnumber(@size)) {width: @size * 4;

}

.myBoxWidth(@size) when (ispercentage(@size)) {width: @size;

}

#myDiv {.myBoxWidth(30%);

}

LESS NESTED RULES 18

// LESS#navigation {

float: right;font-size: 12px;ul {

list-style-type: none;

li {margin: 5px;

}}

}

/* CSS */#navigation {

float: right;font-size: 12px;

}

#navigation ul {list-style-type: none;

}

#navigation ul li {margin:5px;

}

LESS NESTED RULES – COMBINATOR 19

a {color: red;&:hover {

color: green;}

}

//outputa { color: red; }a:hover { color: green; }

LESS NAMESPACES 20

#forms-namespace {.submit-button {

background-color: blue;border: 1px solid red;

}}

//namespaces for grouping, does not actually compile as CSS

#my-submit-button {#forms-namespace > .submit-button;

}

LESS SCOPING 21

@myFontSize: 20px;

#forms-namespace {@myFontSize: 15px;.submit-button {

font-size:@myFontSize; // 15px;}

}

//Variables are Scoped//Mixins are also Scoped

LESS STRING INTERPOLATION 22

@assets: “/assets/images/”;

#form {background: url(“@{assets}mybackground.jpg”);

}

//Back quotes to execute JS@up-root: `”@{assets}”.toUpperCase()`;

LESS SUMMARY 23

#Developer way of writing CSS

#Maintainable CSS

#Reusable and Readable Code

#Structure CSS

#Modularize CSS

#Adds more to CSS

Manish Shekhawat

http://www.facebook.com/manishekhawat

http://www.twitter.com/manishekhawat

http://www.facebook.com/manishekhawat

http://www.twitter.com/manishekhawat

Introduction to LESS

Technology

Transcript of Introduction to LESS