SlideShare a Scribd company logo
LESS
CSS preprocessor
Todd Shelton
Twitter: @tweenout
GitHub: TShelton41
Meetup: Dev Workshop Indy
WHAT IS A PRE-PROCESSOR
• Three major types: LESS, SaSS, Stylus
• It compiles the code we write in a processed language, LESS,
SaSS, Stylus
• Outputs the code to pure CSS
• Lets you create an OO CSS structure
• All need a tool to compile the language to CSS
What are the advantages
• They are browser compatible
• They help make your applications more modular and scalable
by using variables and other CSS properties.
• They allow us to do nesting, custom functions, math, error
checking
• Con: Takes just a little more setup than normal.
• Now lets talk about LESS
LESS - history
• Alexis Sellier is the original designer of the language
• LESS is built on JavaScript (was built on Ruby at first)
• LESS was designed to be as close to CSS as possible so that
valid CSS code is valid LESS Code
• LESS can compile real-time using LESS.js
• LESS has extensions but they are designed independentl
A more popular one is LESSHat
LESS – tools needed
• LESS can be compiled using JavaScript

• The ending file extension is .less
• You need a compiling tool

• Easier tools are out there. CodeKit(Mac), WinLess(Win),
SimpLess(both). This is just a few
• Create a less and css directory in your root folder. Then let the
tools compile your .less files into css code
LESS - setup
• We need to use just one style.less file and import all less files.
This will generate a css file named style.css
• Make sure that your compiler is pointing to your CSS folder.

• Order of importing files is very important
@import “variables.less

• Once you import all your less files you are ready to start
coding. Just remember that anytime you create a new less file.
You will need to import it. Try to make a less file for every part
of your site. OOCSS!
• Note: I have had trouble with SimpLess importing blank less files.
LESS - language
• Less is written very similar to normal CSS
p{
color: #fff;
}

• Making a variable is very easy as well
@myFontColor: #ffffff;
@myWidth: 960px;

LESS uses the @ to determine a variable or import.
LESS - language
• Using the variables. (make sure you have imported your variables.less file first)
p{
color: @myFontColor;
}

• Using Mixins (basically your custom function)
.rounded(@radius: 5px) {
border-radus: @radius;
-webkit-border-radus: @radius;
-moz-border-radus: @radius;
}
button {
.rounded(10px);
}
LESS - language
• Nesting
a{
color: @myFontColor;
&:hover {
color: @myHoverColor;
}
}

• CSS
a{
color: @myFontColor;
}
a:hover {
color: @myHoverColor;
}
LESS - language
• Using Operators
@myNumber: 2px;
.class {
width: @myNumber * 2// 4px
}

• Another usage
@myNumber: 2px;
.class {
width: ((@myNumber +3) * 2)// 10 px
}
LESS - language
• LESS Functions
@themeNavColor: #bc332d;
.class {
background-color: saturate(@themeNavColor, 10%);
}

• Another usage
@themeNavColor: #bc332d;
.class {
background-color: fadeout(@themeNavColor, 10%);
}
LESS - language
• Namespaces
#buttonBundle{
.button () {
display: inline-block;
background-color: grey;
&:hover { background-color: white }
}
}
#nav a {
#buttonBundle > .button;
}

More Related Content

ODP
Deep dive into sass
PPTX
SASS - CSS with Superpower
PDF
Less vs sass
PDF
Css Preprocessors
PPTX
Introduction to sass
PPT
An Introduction to CSS Preprocessors (SASS & LESS)
PPTX
Introduction to SASS
PPTX
Syntactically awesome stylesheets (Sass)
Deep dive into sass
SASS - CSS with Superpower
Less vs sass
Css Preprocessors
Introduction to sass
An Introduction to CSS Preprocessors (SASS & LESS)
Introduction to SASS
Syntactically awesome stylesheets (Sass)

What's hot (20)

PPTX
SASS - Syntactically Awesome Stylesheet
PPTX
Introduction to linux containers
PDF
Sass - Getting Started with Sass!
PDF
Basics of JavaScript
PDF
Docker 간단 개념 / Docker 를 이용한 MSA 기반의 Spring Boot 프로젝트 - DSmentoring 정다운
PPTX
Regular Expression
PPTX
PPTX
Basics of shell programming
PPSX
Coding standard
PDF
Javascript Basic
PPTX
Express JS
PDF
CouchDB
PDF
CSS Best practice
PPTX
Introduction to Javascript By Satyen
PDF
Web application testing with Selenium
PDF
Solid NodeJS with TypeScript, Jest & NestJS
PPT
Maven Introduction
PDF
Shell scripting
PPTX
An Overview on Nuxt.js
PPT
Hybrid Automation Framework Development introduction
SASS - Syntactically Awesome Stylesheet
Introduction to linux containers
Sass - Getting Started with Sass!
Basics of JavaScript
Docker 간단 개념 / Docker 를 이용한 MSA 기반의 Spring Boot 프로젝트 - DSmentoring 정다운
Regular Expression
Basics of shell programming
Coding standard
Javascript Basic
Express JS
CouchDB
CSS Best practice
Introduction to Javascript By Satyen
Web application testing with Selenium
Solid NodeJS with TypeScript, Jest & NestJS
Maven Introduction
Shell scripting
An Overview on Nuxt.js
Hybrid Automation Framework Development introduction
Ad

Viewers also liked (15)

PDF
LESS, the CSS Preprocessor
PDF
LESS un preprocesador CSS
PDF
Large Scale Scrum at Powerhouse.
PDF
A Lean production project in software development at AlmavivA - Lean IT Summi...
PPTX
LeSS at Base Company Case Study
PPTX
Obeya - Wat is het en wat kun je er mee?
PDF
Less intro workshop
PDF
2014 - ERP strategy - Case Study - E_____ D________
PDF
Lean: A strategy for the digital transformation by Régis Medina
PPTX
L'Obeya - Agile France 2015
PPTX
Dessine moi une obeya kanban!
PDF
Les obeyas chez Thales par Cécile Roche
PPTX
Une transformation digitale par le lean product engineering
PPTX
Can We Assess Creativity?
PDF
Hype vs. Reality: The AI Explainer
LESS, the CSS Preprocessor
LESS un preprocesador CSS
Large Scale Scrum at Powerhouse.
A Lean production project in software development at AlmavivA - Lean IT Summi...
LeSS at Base Company Case Study
Obeya - Wat is het en wat kun je er mee?
Less intro workshop
2014 - ERP strategy - Case Study - E_____ D________
Lean: A strategy for the digital transformation by Régis Medina
L'Obeya - Agile France 2015
Dessine moi une obeya kanban!
Les obeyas chez Thales par Cécile Roche
Une transformation digitale par le lean product engineering
Can We Assess Creativity?
Hype vs. Reality: The AI Explainer
Ad

Similar to Less presentation (20)

PPT
PDF
Less(CSS Pre Processor) Introduction
PDF
LESS(CSS Pre Processor) introduction
PDF
CSS Less framework overview, Pros and Cons
PPTX
Less css framework
PDF
LESS is More
PDF
LESS is More (ChiHTML5 Meetup June 2016)
PPTX
Start using less css
PPS
What is LessCSS and its Detailed Explation - Xhtmlchop
PPTX
Write LESS. DO more.
PDF
LESS CSS
PPTX
LESS vs. SASS
PPT
Why less?
PPTX
SASS is more than LESS
PPTX
Revamp Your Stylesheet
PDF
A better CSS: Sass and Less - CC FE & UX
PDF
Get into less by tess hsu
PPT
LESS(CSS preprocessor)
PPT
CSS előfeldolgozók
Less(CSS Pre Processor) Introduction
LESS(CSS Pre Processor) introduction
CSS Less framework overview, Pros and Cons
Less css framework
LESS is More
LESS is More (ChiHTML5 Meetup June 2016)
Start using less css
What is LessCSS and its Detailed Explation - Xhtmlchop
Write LESS. DO more.
LESS CSS
LESS vs. SASS
Why less?
SASS is more than LESS
Revamp Your Stylesheet
A better CSS: Sass and Less - CC FE & UX
Get into less by tess hsu
LESS(CSS preprocessor)
CSS előfeldolgozók

Recently uploaded (20)

PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Encapsulation theory and applications.pdf
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Electronic commerce courselecture one. Pdf
PPTX
Spectroscopy.pptx food analysis technology
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
cuic standard and advanced reporting.pdf
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
The Rise and Fall of 3GPP – Time for a Sabbatical?
Encapsulation theory and applications.pdf
Digital-Transformation-Roadmap-for-Companies.pptx
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
MIND Revenue Release Quarter 2 2025 Press Release
NewMind AI Weekly Chronicles - August'25 Week I
Electronic commerce courselecture one. Pdf
Spectroscopy.pptx food analysis technology
Understanding_Digital_Forensics_Presentation.pptx
Mobile App Security Testing_ A Comprehensive Guide.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
Network Security Unit 5.pdf for BCA BBA.
Building Integrated photovoltaic BIPV_UPV.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Per capita expenditure prediction using model stacking based on satellite ima...
cuic standard and advanced reporting.pdf
Reach Out and Touch Someone: Haptics and Empathic Computing
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...

Less presentation

  • 1. LESS CSS preprocessor Todd Shelton Twitter: @tweenout GitHub: TShelton41 Meetup: Dev Workshop Indy
  • 2. WHAT IS A PRE-PROCESSOR • Three major types: LESS, SaSS, Stylus • It compiles the code we write in a processed language, LESS, SaSS, Stylus • Outputs the code to pure CSS • Lets you create an OO CSS structure • All need a tool to compile the language to CSS
  • 3. What are the advantages • They are browser compatible • They help make your applications more modular and scalable by using variables and other CSS properties. • They allow us to do nesting, custom functions, math, error checking • Con: Takes just a little more setup than normal. • Now lets talk about LESS
  • 4. LESS - history • Alexis Sellier is the original designer of the language • LESS is built on JavaScript (was built on Ruby at first) • LESS was designed to be as close to CSS as possible so that valid CSS code is valid LESS Code • LESS can compile real-time using LESS.js • LESS has extensions but they are designed independentl A more popular one is LESSHat
  • 5. LESS – tools needed • LESS can be compiled using JavaScript • The ending file extension is .less • You need a compiling tool • Easier tools are out there. CodeKit(Mac), WinLess(Win), SimpLess(both). This is just a few • Create a less and css directory in your root folder. Then let the tools compile your .less files into css code
  • 6. LESS - setup • We need to use just one style.less file and import all less files. This will generate a css file named style.css • Make sure that your compiler is pointing to your CSS folder. • Order of importing files is very important @import “variables.less • Once you import all your less files you are ready to start coding. Just remember that anytime you create a new less file. You will need to import it. Try to make a less file for every part of your site. OOCSS! • Note: I have had trouble with SimpLess importing blank less files.
  • 7. LESS - language • Less is written very similar to normal CSS p{ color: #fff; } • Making a variable is very easy as well @myFontColor: #ffffff; @myWidth: 960px; LESS uses the @ to determine a variable or import.
  • 8. LESS - language • Using the variables. (make sure you have imported your variables.less file first) p{ color: @myFontColor; } • Using Mixins (basically your custom function) .rounded(@radius: 5px) { border-radus: @radius; -webkit-border-radus: @radius; -moz-border-radus: @radius; } button { .rounded(10px); }
  • 9. LESS - language • Nesting a{ color: @myFontColor; &:hover { color: @myHoverColor; } } • CSS a{ color: @myFontColor; } a:hover { color: @myHoverColor; }
  • 10. LESS - language • Using Operators @myNumber: 2px; .class { width: @myNumber * 2// 4px } • Another usage @myNumber: 2px; .class { width: ((@myNumber +3) * 2)// 10 px }
  • 11. LESS - language • LESS Functions @themeNavColor: #bc332d; .class { background-color: saturate(@themeNavColor, 10%); } • Another usage @themeNavColor: #bc332d; .class { background-color: fadeout(@themeNavColor, 10%); }
  • 12. LESS - language • Namespaces #buttonBundle{ .button () { display: inline-block; background-color: grey; &:hover { background-color: white } } } #nav a { #buttonBundle > .button; }

Editor's Notes

  • #2: Talk about my selfWorkSchoolInteractive wall displayFlash/FlexNew LanguagesStyling in Flash verses webNew CSS