SlideShare uma empresa Scribd logo
1 de 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 )

Mais conteúdo relacionado

Semelhante a Css less 深入剖析

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

Semelhante a 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#
 

Mais de 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
 

Último

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
 
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
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (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
 
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
 
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...
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
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
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
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
 
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
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
"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 ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 

Css less 深入剖析

Notas do Editor

  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;}