SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Downloaden Sie, um offline zu lesen
LESS(CSS Preprocessor)LESS(CSS Preprocessor)
By: VIPIN KUMAR
Introduction to LESSIntroduction to LESS
LESS is a programming
LESS compiles to CSS3
LESS is a CSS Preprocessor
LESS syntax is modeled after traditional
CSS
LESS is often referred to as “dynamic
css”
Weakness of CSSWeakness of CSS
Lack of Essential features(like
Variables, Mixins etc.)
Hard to maintain(Huge messy CSS Files)
Greater Repetitions
Why LESS?Why LESS?
Save time
Reduce mistakes
Reduce repetition (DRY)
It makes logical sense to break out CSS
into multiple files
More Readability
What can LESS do?What can LESS do?
Variables in your CSS
Mixins (think functions) that allow you
to reuse rule sets
Nesting of styles to mimic your DOM
structure(Hierarchical Structure like
DOM)
Simple mathematical operators: +, -, *, /
of numbers and colors
Mathematical operations such as floor(),
ceiling() and round()
Color operations such as darken(),
lighten(), fadein() and fadeout()
VariablesVariables
Variable Interpolation
The examples above focused on using
variables to control values in CSS rules,
but they can also be used in other places
as well, such as selector names, property
names, URLs and @import statements.
// Variables
@mySelector: banner;
// Usage
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
Compiles To
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
Variables Lazy Loading
Variables are lazy loaded and do not have
to be declared before being used.
.lazy-eval-scope {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;
default variables
We sometimes get requests for default
variables - an ability to set a variable
only if it is not already set.
.float(@val: left){
float: @val;
}
Compiled To
.lazy-eval-scope {
width: 9%;
}
div{
.float;
}
Compiles to
.div {
Float: left;
}
Variable Scope
The scope of a variable refers to the places where it is available. If
you define a variable at the very start of your LESS file it will be
available to any code you write after it.
You can also define a variable inside a CSS rule. In this case the
variable is not available outside of this ruleset; it can only be used
locally.
@color: #222222;
a {
@color: #ffffff;
color:@color;
}
button {
background: @color;
}
MixinsMixins
Reusable classes are called mixins,
Mixins Can accept parameters,
Can define default value for parameters,
@arguments is a special variable that
contains the ordered value stored in all
parameters
.RoundBorders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
.RoundBorders;
}
//Output
.RoundBorders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Guards
A guard is a special expression that is
associated with a mixin declaration that is
evaluated during the mixin process. It must
evaluate to true before the mixin can be
used. Guards are useful when you want to
match on expressions, as opposed to simple
values or arity.
We use the when keyword to begin describing a list of guard expressions.
Guards can be separated with a comma—if any of the guards evaluates to true, it’s
considered a match:
.mixin (@a) when (@a > 10), (@a < -10) { ... }
Instead of a comma, we can use the and keyword so that all of the guards must
match in order to trigger the mixin:
.mixin (@a) when (isnumber(@a)) and (@a>0) { ... }
Finally, you can use the not keyword to negate conditions:
.mixin (@b) when not (@b > 0) { … }
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) { // this is always included
color: @a;
}
Note:The full list of comparison operators usable in guards are: >, >=, =,
=<, <.
Calling:
.class1 { .mixin(#ddd) }
// this matches the first mixin
.class2 { .mixin(#555) }
// this matches the second mixin
Output:
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
If you want to match mixins based on value
type, you can use the is* functions. These
are—iscolor, isnumber, isstring, iskeyword,
and 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 these—
ispixel, ispercentage, isem.
.mixin (@a) when (iscolor(@a)) {
color: @a;
}
.mixin (@a) when (ispixel(@a)) {
width: @a;
}
body {
.mixin(black);
}
div {
.mixin(960px);
}
//Output
body {
color: #000000;
}
div {
width: 960px;
}
LOOPsLOOPs
In Less a mixin can call itself. Such
recursive mixins, when combined with Guard
Expressions and Pattern Matching, can be
used to create various iterative/loop
structures.
.loop(@counter) when (@counter >
0) {
// next iteration
.loop((@counter - 1));
// code for each iteration
width: (10px * @counter);
}
div {
.loop(5); // launch the loop
}
Output:
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
A generic example of using a recursive loop to generate CSS gridA generic example of using a recursive loop to generate CSS grid
classes:classes:
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n)
{
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.column-1 { width: 25%; }
.column-2 { width: 50%; }
.column-3 { width: 75%; }
.column-4 { width: 100%; }
Nesting of styles to mimic your DOMNesting of styles to mimic your DOM
structurestructure
LESS was designed to be as close to CSS as possible, so the
syntax is identical to your current CSS code. Cleaner Structure
With Nesting. you don’t have to repeat selectors over and
over again;
Output:
#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a
{}
LESS
Structure
# header {
#nav {
ul {
li {
a {}
}
}
}
}
NamespacesNamespaces
Namespaces in programming languages are
typically used to group packages of
functionality together.
When starting work on a new website based on
your framework you can add this #my_framework
bundle and use it without messing up any
other styles you might already have or want
to add in the future.
This is also a great way to enable quick
theme changing and modification. If you
develop a number of themes for your company
to use as templates on demand you can include
all of them as bundles in the same LESS file
and use use the one you need.
Examples is in next Slide
#my_framework {
p {
margin: 12px 0;
}
a {
color:blue;
text-decoration: none;
}
.submit {
background: red;
color: white;
padding:5px 12px;
}
}
.submit_button {
#my_framework >
.submit;
}
Output:
#my_framework p {
margin: 12px 0;
}
#my_framework a {
color: blue;
text-decoration: none;
}
#my_framework .submit {
background: red;
color: white;
padding: 5px 12px;
}
.submit_button {
background: red;
color: white;
padding: 5px 12px;
}
ReferencesReferences
http://lesscss.org/features/#mixins-feature
http://www.sitepoint.com/a-comprehensive-introduction-to-less-
mixins/
http://webdesign.tutsplus.com/articles/get-into-less-the-
programmable-stylesheet-language--webdesign-5216

Weitere ähnliche Inhalte

Was ist angesagt?

Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
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
 
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Andrea Tarr
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassClaudina Sarahe
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS PreprocessorAndrea Tarr
 
Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsVisual Engineering
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 MinutesPatrick Crowley
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
 
McrFRED 39 | CSS Processors
McrFRED 39 | CSS ProcessorsMcrFRED 39 | CSS Processors
McrFRED 39 | CSS ProcessorsTristan Ashley
 
Compile your Style
Compile your StyleCompile your Style
Compile your StyleRagnar Kurm
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your SiteMorten Rand-Hendriksen
 

Was ist angesagt? (20)

Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
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)
 
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
 
Less css
Less cssLess css
Less css
 
Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effects
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 Minutes
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
 
McrFRED 39 | CSS Processors
McrFRED 39 | CSS ProcessorsMcrFRED 39 | CSS Processors
McrFRED 39 | CSS Processors
 
Compile your Style
Compile your StyleCompile your Style
Compile your Style
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site
 

Ähnlich wie LESS(CSS preprocessor)

Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsSanjoy Kr. Paul
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3 Wynn Netherland
 
LESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionrushi7567
 
Less(CSS Pre Processor) Introduction
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introductionrushi7567
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperWynn Netherland
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sassKnoldus Inc.
 
Simple introduction Sass
Simple introduction SassSimple introduction Sass
Simple introduction SassZeeshan Ahmed
 
Less css framework
Less css frameworkLess css framework
Less css frameworkManisha Bano
 
@Agawish creating a stunning ui with oracle adf faces, using sass
@Agawish   creating a stunning ui with oracle adf faces, using sass@Agawish   creating a stunning ui with oracle adf faces, using sass
@Agawish creating a stunning ui with oracle adf faces, using sassAmr Gawish
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01Anam Hossain
 
CSS preprocessor: why and how
CSS preprocessor: why and howCSS preprocessor: why and how
CSS preprocessor: why and howmirahman
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application DesignBryce Kerley
 

Ähnlich wie LESS(CSS preprocessor) (20)

Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
LESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introduction
 
Less(CSS Pre Processor) Introduction
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introduction
 
Why less?
Why less?Why less?
Why less?
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
 
Simple introduction Sass
Simple introduction SassSimple introduction Sass
Simple introduction Sass
 
Less css framework
Less css frameworkLess css framework
Less css framework
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
 
LESS CSS
LESS CSSLESS CSS
LESS CSS
 
@Agawish creating a stunning ui with oracle adf faces, using sass
@Agawish   creating a stunning ui with oracle adf faces, using sass@Agawish   creating a stunning ui with oracle adf faces, using sass
@Agawish creating a stunning ui with oracle adf faces, using sass
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01
 
CSS preprocessor: why and how
CSS preprocessor: why and howCSS preprocessor: why and how
CSS preprocessor: why and how
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
Sass
SassSass
Sass
 

Kürzlich hochgeladen

Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQuiz Club NITW
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDhatriParmar
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Celine George
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17Celine George
 
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...HetalPathak10
 
An Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPAn Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPCeline George
 
The role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipThe role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipKarl Donert
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQuiz Club NITW
 
Shark introduction Morphology and its behaviour characteristics
Shark introduction Morphology and its behaviour characteristicsShark introduction Morphology and its behaviour characteristics
Shark introduction Morphology and its behaviour characteristicsArubSultan
 
6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroom6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroomSamsung Business USA
 
4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptxmary850239
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...Nguyen Thanh Tu Collection
 
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Osopher
 
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxGrade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxkarenfajardo43
 
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...Nguyen Thanh Tu Collection
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxSayali Powar
 
Indexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfIndexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfChristalin Nelson
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...DhatriParmar
 

Kürzlich hochgeladen (20)

Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
 
CARNAVAL COM MAGIA E EUFORIA _
CARNAVAL COM MAGIA E EUFORIA            _CARNAVAL COM MAGIA E EUFORIA            _
CARNAVAL COM MAGIA E EUFORIA _
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17
 
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
 
An Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPAn Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERP
 
The role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipThe role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenship
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
 
Shark introduction Morphology and its behaviour characteristics
Shark introduction Morphology and its behaviour characteristicsShark introduction Morphology and its behaviour characteristics
Shark introduction Morphology and its behaviour characteristics
 
6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroom6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroom
 
4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
 
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
 
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxGrade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
 
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
 
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of EngineeringFaculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
 
Indexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfIndexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdf
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
 

LESS(CSS preprocessor)

  • 2. Introduction to LESSIntroduction to LESS LESS is a programming LESS compiles to CSS3 LESS is a CSS Preprocessor LESS syntax is modeled after traditional CSS LESS is often referred to as “dynamic css”
  • 3. Weakness of CSSWeakness of CSS Lack of Essential features(like Variables, Mixins etc.) Hard to maintain(Huge messy CSS Files) Greater Repetitions
  • 4. Why LESS?Why LESS? Save time Reduce mistakes Reduce repetition (DRY) It makes logical sense to break out CSS into multiple files More Readability
  • 5. What can LESS do?What can LESS do? Variables in your CSS Mixins (think functions) that allow you to reuse rule sets Nesting of styles to mimic your DOM structure(Hierarchical Structure like DOM) Simple mathematical operators: +, -, *, / of numbers and colors Mathematical operations such as floor(), ceiling() and round() Color operations such as darken(), lighten(), fadein() and fadeout()
  • 6. VariablesVariables Variable Interpolation The examples above focused on using variables to control values in CSS rules, but they can also be used in other places as well, such as selector names, property names, URLs and @import statements. // Variables @mySelector: banner; // Usage .@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto; } Compiles To .banner { font-weight: bold; line-height: 40px; margin: 0 auto; }
  • 7. Variables Lazy Loading Variables are lazy loaded and do not have to be declared before being used. .lazy-eval-scope { width: @var; @a: 9%; } @var: @a; @a: 100%; default variables We sometimes get requests for default variables - an ability to set a variable only if it is not already set. .float(@val: left){ float: @val; } Compiled To .lazy-eval-scope { width: 9%; } div{ .float; } Compiles to .div { Float: left; }
  • 8. Variable Scope The scope of a variable refers to the places where it is available. If you define a variable at the very start of your LESS file it will be available to any code you write after it. You can also define a variable inside a CSS rule. In this case the variable is not available outside of this ruleset; it can only be used locally. @color: #222222; a { @color: #ffffff; color:@color; } button { background: @color; }
  • 9. MixinsMixins Reusable classes are called mixins, Mixins Can accept parameters, Can define default value for parameters, @arguments is a special variable that contains the ordered value stored in all parameters .RoundBorders { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #menu { color: gray; .RoundBorders; } //Output .RoundBorders { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #menu { color: gray; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
  • 10. Guards A guard is a special expression that is associated with a mixin declaration that is evaluated during the mixin process. It must evaluate to true before the mixin can be used. Guards are useful when you want to match on expressions, as opposed to simple values or arity. We use the when keyword to begin describing a list of guard expressions. Guards can be separated with a comma—if any of the guards evaluates to true, it’s considered a match: .mixin (@a) when (@a > 10), (@a < -10) { ... } Instead of a comma, we can use the and keyword so that all of the guards must match in order to trigger the mixin: .mixin (@a) when (isnumber(@a)) and (@a>0) { ... } Finally, you can use the not keyword to negate conditions: .mixin (@b) when not (@b > 0) { … }
  • 11. .mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { // this is always included color: @a; } Note:The full list of comparison operators usable in guards are: >, >=, =, =<, <. Calling: .class1 { .mixin(#ddd) } // this matches the first mixin .class2 { .mixin(#555) } // this matches the second mixin Output: .class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; }
  • 12. If you want to match mixins based on value type, you can use the is* functions. These are—iscolor, isnumber, isstring, iskeyword, and 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 these— ispixel, ispercentage, isem. .mixin (@a) when (iscolor(@a)) { color: @a; } .mixin (@a) when (ispixel(@a)) { width: @a; } body { .mixin(black); } div { .mixin(960px); } //Output body { color: #000000; } div { width: 960px; }
  • 13. LOOPsLOOPs In Less a mixin can call itself. Such recursive mixins, when combined with Guard Expressions and Pattern Matching, can be used to create various iterative/loop structures. .loop(@counter) when (@counter > 0) { // next iteration .loop((@counter - 1)); // code for each iteration width: (10px * @counter); } div { .loop(5); // launch the loop } Output: div { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px; }
  • 14. A generic example of using a recursive loop to generate CSS gridA generic example of using a recursive loop to generate CSS grid classes:classes: .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
  • 15. Nesting of styles to mimic your DOMNesting of styles to mimic your DOM structurestructure LESS was designed to be as close to CSS as possible, so the syntax is identical to your current CSS code. Cleaner Structure With Nesting. you don’t have to repeat selectors over and over again; Output: #header {} #header #nav {} #header #nav ul {} #header #nav ul li {} #header #nav ul li a {} LESS Structure # header { #nav { ul { li { a {} } } } }
  • 16. NamespacesNamespaces Namespaces in programming languages are typically used to group packages of functionality together. When starting work on a new website based on your framework you can add this #my_framework bundle and use it without messing up any other styles you might already have or want to add in the future. This is also a great way to enable quick theme changing and modification. If you develop a number of themes for your company to use as templates on demand you can include all of them as bundles in the same LESS file and use use the one you need. Examples is in next Slide
  • 17. #my_framework { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; } } .submit_button { #my_framework > .submit; } Output: #my_framework p { margin: 12px 0; } #my_framework a { color: blue; text-decoration: none; } #my_framework .submit { background: red; color: white; padding: 5px 12px; } .submit_button { background: red; color: white; padding: 5px 12px; }