Introduction to LESS

Introduction to LESS
DYNAMIC 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 {
}
# 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 {
}
#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;
}
}
//output
a { 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

Introduction to LESS

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Introduction to LESS

Similaire à Introduction to LESS (20)

Dernier

Dernier (20)

Introduction to LESS