SlideShare a Scribd company logo
1 of 24
Download to read offline
LeSS in Action

fahai@taobao.com
What the …
• The dynamic stylesheet language
• LESS extends CSS with dynamic
  behavior such as variables, mixins,
  operations and functions. LESS runs
  on both the client-side (IE 6+,
  Webkit, Firefox) and server-side,
  with Node.js.
Features
Variables
• @nice-blue: #5B83AD;
• @light-blue: @nice-blue + #111;
• #header { color: @light-blue; }

• @fnord: "I am fnord.";
• @var: 'fnord';
• content: @@var;
Mixins
•   .border-radius (@radius) {
•     border-radius: @radius;
•     -moz-border-radius: @radius;
•     -webkit-border-radius: @radius;
•   }
•   #header {
•     .border-radius(4px);
•   }
•   .button {
•     .border-radius(6px);
•   }
Nesting
• #header {
•   color: black;

•     .navigation {
•       font-size: 12px;
•     }
•     .logo {
•       width: 300px;
•       &:hover { text-decoration: none }
•     }
• }
Operations
• @base: 5%;
• @filler: @base * 2;
• @other: @base + @filler;

• color: #888 / 4;
• background-color: @base-color +
  #111;
• height: 100% / 2 + @filler;
Color functions
• @base: #f04615;

• .class {
•   color: saturate(@base, 5%);
•   background-color:
  lighten(spin(@base, 8), 25%);
• }
Namespaces
•   #bundle {
•     .button () {
•       display: block;
•       border: 1px solid black;
•       background-color: grey;
•     }
•     .tab { ... }
•     .citation { ... }
•   }
•   #header a {
•     color: orange;
•     #bundle > .button;
•   }
Scope
• @var: red;

• #page {
•   @var: white;
•   #header {
•     color: @var; // white
•   }
• }

• #footer {
•   color: @var; // red
• }
Importing
• @import "lib.less";
• @import "lib";
Escaping
• .class {
•   filter:
  ~"progid:DXImageTransform.Micro
  soft.AlphaImageLoader(src='imag
  e.png')";
• }
Usage
Client-side
• Link your .less stylesheets with the
  rel set to “stylesheet/less”:
• <link rel="stylesheet/less" type="text/css"
  href="styles.less">

• Then download less.js from the top
  of the page, and include it in the
  <head> element of your page, like
  so:
• <script src="less.js"
  type="text/javascript"></script>
Server-side
• Once installed, you can invoke the
  compiler from node, as such:

• var less = require('less');

• less.render('.class { width: 1 + 1 }',
  function (e, css) {
•     console.log(css);
• });
Local CMD
• Less comes with a binary, which lets
  you invoke the compiler from the
  command-line, as such:

• $ lessc styles.less
Practice
Overview
lib.less
example.less
More …
•   Server-side dynamic compilation
•   Server-side static deployment
•   Client-side compilation with lazyload
•   …
Reference
• http://www.lesscss.org/
Q & A & Thx

More Related Content

What's hot

Styling with CSS
Styling with CSSStyling with CSS
Styling with CSSMike Crabb
 
Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1Gheyath M. Othman
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT ProsPaul Hunt
 
Rapid API Development ArangoDB Foxx
Rapid API Development ArangoDB FoxxRapid API Development ArangoDB Foxx
Rapid API Development ArangoDB FoxxMichael Hackstein
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5Gheyath M. Othman
 
Rupy2012 ArangoDB Workshop Part2
Rupy2012 ArangoDB Workshop Part2Rupy2012 ArangoDB Workshop Part2
Rupy2012 ArangoDB Workshop Part2ArangoDB Database
 
Speed Up Your APEX Apps with JSON and Handlebars
Speed Up Your APEX Apps with JSON and HandlebarsSpeed Up Your APEX Apps with JSON and Handlebars
Speed Up Your APEX Apps with JSON and HandlebarsMarko Gorički
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sassSean Wolfe
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyPaul Hunt
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4Gheyath M. Othman
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingJames Cryer
 
Introduction to CouchDB
Introduction to CouchDBIntroduction to CouchDB
Introduction to CouchDBOpusVL
 
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Thinkful
 
Web fundamental concept and tags
Web fundamental concept and tags Web fundamental concept and tags
Web fundamental concept and tags shameen khan
 

What's hot (19)

Styling with CSS
Styling with CSSStyling with CSS
Styling with CSS
 
Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
 
Intro to HTML + CSS
Intro to HTML + CSSIntro to HTML + CSS
Intro to HTML + CSS
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros
 
Wd hw 1
Wd hw 1Wd hw 1
Wd hw 1
 
Intro to CSS
Intro to CSSIntro to CSS
Intro to CSS
 
Rapid API Development ArangoDB Foxx
Rapid API Development ArangoDB FoxxRapid API Development ArangoDB Foxx
Rapid API Development ArangoDB Foxx
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5
 
Rupy2012 ArangoDB Workshop Part2
Rupy2012 ArangoDB Workshop Part2Rupy2012 ArangoDB Workshop Part2
Rupy2012 ArangoDB Workshop Part2
 
Speed Up Your APEX Apps with JSON and Handlebars
Speed Up Your APEX Apps with JSON and HandlebarsSpeed Up Your APEX Apps with JSON and Handlebars
Speed Up Your APEX Apps with JSON and Handlebars
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday Jersey
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
 
Introduction to CouchDB
Introduction to CouchDBIntroduction to CouchDB
Introduction to CouchDB
 
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)
 
Web fundamental concept and tags
Web fundamental concept and tags Web fundamental concept and tags
Web fundamental concept and tags
 

Viewers also liked

Rendering in browser
Rendering in browserRendering in browser
Rendering in browserPu Shiming
 
Gengo Africa
Gengo AfricaGengo Africa
Gengo AfricaYo Ehara
 
Pagelet in action
Pagelet in actionPagelet in action
Pagelet in actionPu Shiming
 
Mars attack 2010-07-16
Mars attack 2010-07-16Mars attack 2010-07-16
Mars attack 2010-07-16Pu Shiming
 
Mars attack 2011-04-15
Mars attack 2011-04-15Mars attack 2011-04-15
Mars attack 2011-04-15Pu Shiming
 
Nips yomikai 1226
Nips yomikai 1226Nips yomikai 1226
Nips yomikai 1226Yo Ehara
 
Acl yomikai, 1016, 20110903
Acl yomikai, 1016,  20110903Acl yomikai, 1016,  20110903
Acl yomikai, 1016, 20110903Yo Ehara
 
Mobilize your Retail Customer Experience with iBeacons and Proximity Marketing
Mobilize your Retail Customer Experience with iBeacons and Proximity MarketingMobilize your Retail Customer Experience with iBeacons and Proximity Marketing
Mobilize your Retail Customer Experience with iBeacons and Proximity Marketingjimwebster1
 
Encoding in javascript
Encoding in javascriptEncoding in javascript
Encoding in javascriptPu Shiming
 
Employee Perception Towards Organization Change
Employee Perception Towards Organization ChangeEmployee Perception Towards Organization Change
Employee Perception Towards Organization ChangeAshish Kumar
 
Charset and encoding
Charset and encodingCharset and encoding
Charset and encodingPu Shiming
 
Innovative Changes In Human Resource Management
Innovative Changes In Human Resource ManagementInnovative Changes In Human Resource Management
Innovative Changes In Human Resource ManagementAshish Kumar
 
Icml yomikai 07_16
Icml yomikai 07_16Icml yomikai 07_16
Icml yomikai 07_16Yo Ehara
 
Gitlab - the new workbench (2nd edition)
Gitlab - the new workbench (2nd edition)Gitlab - the new workbench (2nd edition)
Gitlab - the new workbench (2nd edition)Pu Shiming
 

Viewers also liked (16)

Rendering in browser
Rendering in browserRendering in browser
Rendering in browser
 
Gengo Africa
Gengo AfricaGengo Africa
Gengo Africa
 
Pagelet in action
Pagelet in actionPagelet in action
Pagelet in action
 
Mars attack 2010-07-16
Mars attack 2010-07-16Mars attack 2010-07-16
Mars attack 2010-07-16
 
Mars attack 2011-04-15
Mars attack 2011-04-15Mars attack 2011-04-15
Mars attack 2011-04-15
 
Nips yomikai 1226
Nips yomikai 1226Nips yomikai 1226
Nips yomikai 1226
 
Acl yomikai, 1016, 20110903
Acl yomikai, 1016,  20110903Acl yomikai, 1016,  20110903
Acl yomikai, 1016, 20110903
 
Case study
Case studyCase study
Case study
 
Dpl in action
Dpl in actionDpl in action
Dpl in action
 
Mobilize your Retail Customer Experience with iBeacons and Proximity Marketing
Mobilize your Retail Customer Experience with iBeacons and Proximity MarketingMobilize your Retail Customer Experience with iBeacons and Proximity Marketing
Mobilize your Retail Customer Experience with iBeacons and Proximity Marketing
 
Encoding in javascript
Encoding in javascriptEncoding in javascript
Encoding in javascript
 
Employee Perception Towards Organization Change
Employee Perception Towards Organization ChangeEmployee Perception Towards Organization Change
Employee Perception Towards Organization Change
 
Charset and encoding
Charset and encodingCharset and encoding
Charset and encoding
 
Innovative Changes In Human Resource Management
Innovative Changes In Human Resource ManagementInnovative Changes In Human Resource Management
Innovative Changes In Human Resource Management
 
Icml yomikai 07_16
Icml yomikai 07_16Icml yomikai 07_16
Icml yomikai 07_16
 
Gitlab - the new workbench (2nd edition)
Gitlab - the new workbench (2nd edition)Gitlab - the new workbench (2nd edition)
Gitlab - the new workbench (2nd edition)
 

Similar to Learn How to Use LESS for Dynamic Stylesheets

LESS is More
LESS is MoreLESS is More
LESS is Morejsmith92
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With LessDavid Engel
 
Comparing XAML and HTML: FIGHT!
Comparing XAML and HTML: FIGHT!Comparing XAML and HTML: FIGHT!
Comparing XAML and HTML: FIGHT!Gill Cleeren
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
Introduction To Less
Introduction To Less Introduction To Less
Introduction To Less Knoldus Inc.
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESSjsmith92
 
BITM3730 9-26.pptx
BITM3730 9-26.pptxBITM3730 9-26.pptx
BITM3730 9-26.pptxMattMarino13
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherIvano Malavolta
 
Expert guide for PHP
Expert guide for PHPExpert guide for PHP
Expert guide for PHPSteve Fort
 
Cordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web SkillsCordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web SkillsClay Ewing
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 

Similar to Learn How to Use LESS for Dynamic Stylesheets (20)

LESS is More
LESS is MoreLESS is More
LESS is More
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With Less
 
Comparing XAML and HTML: FIGHT!
Comparing XAML and HTML: FIGHT!Comparing XAML and HTML: FIGHT!
Comparing XAML and HTML: FIGHT!
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Introduction To Less
Introduction To Less Introduction To Less
Introduction To Less
 
CSS
CSSCSS
CSS
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESS
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
Webtech File.docx
Webtech File.docxWebtech File.docx
Webtech File.docx
 
BITM3730 9-26.pptx
BITM3730 9-26.pptxBITM3730 9-26.pptx
BITM3730 9-26.pptx
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
 
Team styles
Team stylesTeam styles
Team styles
 
Expert guide for PHP
Expert guide for PHPExpert guide for PHP
Expert guide for PHP
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Cordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web SkillsCordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web Skills
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
CSS3
CSS3CSS3
CSS3
 

Recently uploaded

How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 

Recently uploaded (20)

How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 

Learn How to Use LESS for Dynamic Stylesheets

  • 1.
  • 3. What the … • The dynamic stylesheet language • LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
  • 5. Variables • @nice-blue: #5B83AD; • @light-blue: @nice-blue + #111; • #header { color: @light-blue; } • @fnord: "I am fnord."; • @var: 'fnord'; • content: @@var;
  • 6. Mixins • .border-radius (@radius) { • border-radius: @radius; • -moz-border-radius: @radius; • -webkit-border-radius: @radius; • } • #header { • .border-radius(4px); • } • .button { • .border-radius(6px); • }
  • 7. Nesting • #header { • color: black; • .navigation { • font-size: 12px; • } • .logo { • width: 300px; • &:hover { text-decoration: none } • } • }
  • 8. Operations • @base: 5%; • @filler: @base * 2; • @other: @base + @filler; • color: #888 / 4; • background-color: @base-color + #111; • height: 100% / 2 + @filler;
  • 9. Color functions • @base: #f04615; • .class { • color: saturate(@base, 5%); • background-color: lighten(spin(@base, 8), 25%); • }
  • 10. Namespaces • #bundle { • .button () { • display: block; • border: 1px solid black; • background-color: grey; • } • .tab { ... } • .citation { ... } • } • #header a { • color: orange; • #bundle > .button; • }
  • 11. Scope • @var: red; • #page { • @var: white; • #header { • color: @var; // white • } • } • #footer { • color: @var; // red • }
  • 13. Escaping • .class { • filter: ~"progid:DXImageTransform.Micro soft.AlphaImageLoader(src='imag e.png')"; • }
  • 14. Usage
  • 15. Client-side • Link your .less stylesheets with the rel set to “stylesheet/less”: • <link rel="stylesheet/less" type="text/css" href="styles.less"> • Then download less.js from the top of the page, and include it in the <head> element of your page, like so: • <script src="less.js" type="text/javascript"></script>
  • 16. Server-side • Once installed, you can invoke the compiler from node, as such: • var less = require('less'); • less.render('.class { width: 1 + 1 }', function (e, css) { • console.log(css); • });
  • 17. Local CMD • Less comes with a binary, which lets you invoke the compiler from the command-line, as such: • $ lessc styles.less
  • 22. More … • Server-side dynamic compilation • Server-side static deployment • Client-side compilation with lazyload • …
  • 24. Q & A & Thx