SlideShare ist ein Scribd-Unternehmen logo
1 von 26
CSS LESS 深入剖析
Howard 2014/01/27
Guildline
•
•
•
•
•
•
•
•
•
•

Variables
Mixins
Nested Media Queries ( 略 )
Advanced Usage of & ( 略 )
Scope ( 略 )
Extend
Namespaces
Parametric Mixins
String interpolation
Selector Interpolation
Variables
Mixins
•

In LESS, it is possible to include a bunch of
properties from one ruleset into another ruleset. So
say we have the following class:
Mixins
• "mix-in" properties from existing styles
• You can mix-in class selectors and id selectors, e.g.
Mixins
• When you call the mixin, the parenthesis are
optional.
Not outputting the mixin
• If you want to create a mixin but you do not want
that mixin to be output, you can put parenthesis
around it.
Selectors in mixins
•

Mixins can contain more than just properties, they
can contain selectors to.
Mixins With Multiple Parameters
• Parameters are either semicolon or comma
separated. It is recommended to use semicolon.
• The symbol comma has double meaning:
o It can be interpreted either as a mixin parameters
separator
o As css list separator.
Mixins With Multiple Parameters
• two arguments and each contains comma
separated list
Mixins With Multiple Parameters
•

three arguments and each contains one number
Mixins With Multiple Parameters
•

use dummy semicolon to create mixin call with one
argument containing comma separated css list
Mixins With Multiple Parameters
• comma separated default value: .name(@param1:
red, blue;).
Mixins With Multiple Parameters
• It is legal to define multiple mixins with the same
name and number of parameters. Less will use
properties of all that can apply.
The Keyword !important
• Use the !important keyword after mixin call to mark
all properties brought by it as !important:
Mixin Guards
• Guards are useful when you want to match on
expressions, as opposed to simple values or arity.
• The full list of comparison operators usable in guards
are: > >= = =< <
Mixin Guards
• Guards can be separated with a comma ‘,’–if any
of the guards evaluates to true, it’s considered as a
match:

• if you want to match mixins based on value type,
you can use the is* functions:
Mixin Guards
• Here are the basic type checking functions:
o
o
o
o
o

iscolor
isnumber
isstring
iskeyword
Isurl

• If you want to check if a value, in addition to being
a number, is in a specific unit, you may use one of:
o
o
o
o

ispixel
ispercentage
isem
isunit
Mixin Guards
•
略
• Nested Queries
• Advanced Usage of &
• Scope
Extend
• As of version 1.4, LESS supports extending a style.
• it adds the extending selector to the selector list for
output of the extended class.
• The syntax for extend is designed to mimic the
syntax of CSS pseudo-classes, and can be
combined with pseudo-classes as long as any
extends selectors come last.
Namespaces
• If you want to mixin properties inside a more
complicated selector, you can stack up multiple id's
or classes.
• again the > is optional
Namespaces
•
String interpolation
• Variables can be embedded inside strings in a
similar way to Ruby or PHP, with the @{name}
construct:
Selector Interpolation
• If you want to use LESS variables inside selectors,
you can do this by referencing the variable using
@{selector} as in string interpolation. For example:
References
• http://www.lesscss.org/
• http://lesscss.org/features.html#extend ( lost )

Weitere ähnliche Inhalte

Ähnlich wie Css less 深入剖析

How totestinternalprotectmethodsinc#
How totestinternalprotectmethodsinc#How totestinternalprotectmethodsinc#
How totestinternalprotectmethodsinc#
LearningTech
 

Ähnlich wie Css less 深入剖析 (20)

Lec 1.3 Object Oriented Programming
Lec 1.3 Object Oriented ProgrammingLec 1.3 Object Oriented Programming
Lec 1.3 Object Oriented Programming
 
CSharp for Unity Day 3
CSharp for Unity Day 3CSharp for Unity Day 3
CSharp for Unity Day 3
 
Web technologies-course 03.pptx
Web technologies-course 03.pptxWeb technologies-course 03.pptx
Web technologies-course 03.pptx
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSS
 
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
 
Java
JavaJava
Java
 
OCP Java (OCPJP) 8 Exam Quick Reference Card
OCP Java (OCPJP) 8 Exam Quick Reference CardOCP Java (OCPJP) 8 Exam Quick Reference Card
OCP Java (OCPJP) 8 Exam Quick Reference Card
 
CSS Introduction
CSS Introduction CSS Introduction
CSS Introduction
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
 
OOPS – General Understanding in .NET
OOPS – General Understanding in .NETOOPS – General Understanding in .NET
OOPS – General Understanding in .NET
 
Flexbox, Grid and Sass
Flexbox, Grid and SassFlexbox, Grid and Sass
Flexbox, Grid and Sass
 
Semantic Analysis.pptx
Semantic Analysis.pptxSemantic Analysis.pptx
Semantic Analysis.pptx
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Object Oriented Programming C#
Object Oriented Programming C#Object Oriented Programming C#
Object Oriented Programming C#
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
 
Sass
SassSass
Sass
 
Advanced c#
Advanced c#Advanced c#
Advanced c#
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
 
How totestinternalprotectmethodsinc#
How totestinternalprotectmethodsinc#How totestinternalprotectmethodsinc#
How totestinternalprotectmethodsinc#
 

Mehr von LearningTech (20)

vim
vimvim
vim
 
PostCss
PostCssPostCss
PostCss
 
ReactJs
ReactJsReactJs
ReactJs
 
Docker
DockerDocker
Docker
 
Semantic ui
Semantic uiSemantic ui
Semantic ui
 
node.js errors
node.js errorsnode.js errors
node.js errors
 
Process control nodejs
Process control nodejsProcess control nodejs
Process control nodejs
 
Expression tree
Expression treeExpression tree
Expression tree
 
SQL 效能調校
SQL 效能調校SQL 效能調校
SQL 效能調校
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504
 
Reflection &amp; activator
Reflection &amp; activatorReflection &amp; activator
Reflection &amp; activator
 
Peggy markdown
Peggy markdownPeggy markdown
Peggy markdown
 
Node child process
Node child processNode child process
Node child process
 
20160415ken.lee
20160415ken.lee20160415ken.lee
20160415ken.lee
 
Peggy elasticsearch應用
Peggy elasticsearch應用Peggy elasticsearch應用
Peggy elasticsearch應用
 
Expression tree
Expression treeExpression tree
Expression tree
 
Vic weekly learning_20160325
Vic weekly learning_20160325Vic weekly learning_20160325
Vic weekly learning_20160325
 
D3js learning tips
D3js learning tipsD3js learning tips
D3js learning tips
 
git command
git commandgit command
git command
 

Kürzlich hochgeladen

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Kürzlich hochgeladen (20)

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
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
 
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
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.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
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 

Css less 深入剖析

Hinweis der Redaktion

  1. .name(@arg1, @arg2) { border:@arg1 @arg2;}div{ .name(1, 2, 3; something, else);}
  2. .name(@arg1, @arg2) { border:@arg1 @arg2;}div{ .name(1, 2);}
  3. .mixin (@a: 0) { border: @a; boxer: @a;}.unimportant { .mixin(1); }.important { .mixin(2) !important; }
  4. .mixin (@a) when (lightness(@a) &gt;= 50%) { background-color: black;}.mixin (@a) when (lightness(@a) &lt; 50%) { background-color: white;}.mixin (@a) { color: @a;}.class1 { .mixin(#ddd) }.class2 { .mixin(#555) }
  5. #outer { .inner {color: red; }}.c { #outer &gt; .inner;}
  6. @base-url: &quot;http://abc.com&quot;;div{ background-image: url(&quot;@{base-url}/bg.png&quot;);}
  7. @name: blocked;.@{name} { color: black;}