SlideShare une entreprise Scribd logo
1  sur  16
.less - CSS doneright! Daniel Hölbling http://www.tigraine.at http://www.dotlesscss.com
WHAT is CSS? Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language
Howwe do use CSS CSS Zen Garden Markup iscompletelydecoupled Drasticallychangesthelayoutofthepage.  Markup looksgood – CSS a nightmare Multiple classes Good CSS reuse Markup „married“ tospecific CSS code. Not muchbetterthanstyle=„…“ (<2000)
CSS Zen Garden Good CSS lookslikethis:
CSS Zen Garden Good CSS lookslikethis: Redundant! DRY-Violation
Multiple Classes CSS looksgood Markup not so much:
CSS alwayssucks!
LessCss A revolutionary Ruby Framework to fix CSS http://lesscss.org
Variables LESS CSS
Operations LESS CSS
Mixins LESS CSS
Nestedrules LESS CSS
dotless .NET Port ofLessCss Started in July Foundedby: Erik van Brakel Chris John Owen Daniel Hölbling Native .NET parser/compiler
Features CompleteLess Syntax Transparent Lesscompilation (Through HttpHandler) Console Compiler T4CSS – Lessthrough T4 Templates Built in CSS Compression
Demo
Thanksforlistening! More info: http://www.dotlesscss.com My Blog:http://www.tigraine.at

Contenu connexe

Tendances

Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The CosmeticIrfan Maulana
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
Web programming css
Web programming cssWeb programming css
Web programming cssUma mohan
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sassSean Wolfe
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsSuzanne Dergacheva
 
Developer skills
Developer skillsDeveloper skills
Developer skillswebger
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_phpJeanho Chu
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with SassRob Friesel
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sassKnoldus Inc.
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentalsMike Bradshaw
 

Tendances (20)

Less
LessLess
Less
 
Functional Css
Functional CssFunctional Css
Functional Css
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Css to-scss
Css to-scssCss to-scss
Css to-scss
 
The web context
The web contextThe web context
The web context
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
 
Css1
Css1Css1
Css1
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
 
Developer skills
Developer skillsDeveloper skills
Developer skills
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
CSS Modules
CSS ModulesCSS Modules
CSS Modules
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentals
 

En vedette

Less is more
Less is moreLess is more
Less is moregalan83
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)VIPIN KUMAR
 
less freamwork
less freamworkless freamwork
less freamworkkafshduzak
 
CSS with LESS for #jd13nl
CSS with LESS for #jd13nlCSS with LESS for #jd13nl
CSS with LESS for #jd13nlHans Kuijpers
 
2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...
2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...
2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...Gabriela Levit
 
LESS CSS Pre-processor
LESS CSS Pre-processorLESS CSS Pre-processor
LESS CSS Pre-processorKannika Kong
 
Google Calendar Presentation
Google Calendar PresentationGoogle Calendar Presentation
Google Calendar Presentationmowebmedia
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS PreprocessorAndrea Tarr
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozókMáté Farkas
 
Google calendar presentation
Google calendar presentationGoogle calendar presentation
Google calendar presentationCorinne Takara
 
PostCSS، آینده CSS بعد از LESS و Sass
PostCSS، آینده CSS بعد از LESS و SassPostCSS، آینده CSS بعد از LESS و Sass
PostCSS، آینده CSS بعد از LESS و SassWeb Standards School
 
LESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownLESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownKevin Powell
 

En vedette (20)

Less css
Less cssLess css
Less css
 
LESS CSS
LESS CSSLESS CSS
LESS CSS
 
Less is more
Less is moreLess is more
Less is more
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)
 
'Less' css
'Less' css'Less' css
'Less' css
 
less freamwork
less freamworkless freamwork
less freamwork
 
Less css
Less cssLess css
Less css
 
CSS with LESS for #jd13nl
CSS with LESS for #jd13nlCSS with LESS for #jd13nl
CSS with LESS for #jd13nl
 
2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...
2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...
2014 WordPress NYC Meetup: Better WordPress Style - Using SASS and LESS CSS I...
 
LESS
LESSLESS
LESS
 
Introduction to LESS
Introduction to LESSIntroduction to LESS
Introduction to LESS
 
LESS CSS Pre-processor
LESS CSS Pre-processorLESS CSS Pre-processor
LESS CSS Pre-processor
 
Google Calendar Presentation
Google Calendar PresentationGoogle Calendar Presentation
Google Calendar Presentation
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
 
Google calendar presentation
Google calendar presentationGoogle calendar presentation
Google calendar presentation
 
PostCSS، آینده CSS بعد از LESS و Sass
PostCSS، آینده CSS بعد از LESS و SassPostCSS، آینده CSS بعد از LESS و Sass
PostCSS، آینده CSS بعد از LESS و Sass
 
LESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownLESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler Showdown
 

Similaire à .Less - CSS done right

The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet LanguagesAndrea Tino
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
HTML Tour - Buenas prácticas en el desarrollo web
HTML Tour - Buenas prácticas en el desarrollo webHTML Tour - Buenas prácticas en el desarrollo web
HTML Tour - Buenas prácticas en el desarrollo webPlain Concepts
 
Less - an Introduction
Less - an IntroductionLess - an Introduction
Less - an IntroductionJaydev Gajera
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS ImplementationAmey Parab
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)Folio3 Software
 
70 Expert Ideas For Better Css
70 Expert Ideas For Better Css70 Expert Ideas For Better Css
70 Expert Ideas For Better Cssfherz
 
Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753george42__
 

Similaire à .Less - CSS done right (20)

The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Make your CSS beautiful again
Make your CSS beautiful againMake your CSS beautiful again
Make your CSS beautiful again
 
HTML Tour - Buenas prácticas en el desarrollo web
HTML Tour - Buenas prácticas en el desarrollo webHTML Tour - Buenas prácticas en el desarrollo web
HTML Tour - Buenas prácticas en el desarrollo web
 
Less - an Introduction
Less - an IntroductionLess - an Introduction
Less - an Introduction
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
 
SASS Lecture
SASS Lecture SASS Lecture
SASS Lecture
 
David Weliver
David WeliverDavid Weliver
David Weliver
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
 
70 Expert Ideas For Better Css
70 Expert Ideas For Better Css70 Expert Ideas For Better Css
70 Expert Ideas For Better Css
 
Css ppt
Css pptCss ppt
Css ppt
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753
 
Srijan presentation on CSS
Srijan presentation on CSSSrijan presentation on CSS
Srijan presentation on CSS
 

Dernier

What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 

Dernier (20)

What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 

.Less - CSS done right