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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Introduction to LESS

Ähnlich wie Introduction to LESS (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to LESS