Your SlideShare is downloading. ×
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Introduction to LESS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to LESS

739

Published on

LESS, CSS, Maintainable CSS, Programming

LESS, CSS, Maintainable CSS, Programming

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
739
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to LESS DYNAMIC STYLESHEET LANGUAGE – COMPILES TO CSS 1
  • 2. AGENDA 2 # Problems writing plain CSS # LESS
  • 3. PROBLEMS WRITING PLAIN CSS 3 # No option for variables # No option for reusable CSS # Duplication of Code # No option to debug CSS code # No option to perform calculations in CSS # Hard to maintain even for minor changes # Imports make request to fetch CSS files
  • 4. DYNAMIC STYLESHEET LANGUAGES 4 # Better ways to write CSS # Option for named variables # Option for creating reusable CSS # Clear CSS rules cascading # Option to perform calculations in CSS # Combine CSS files rather than using import
  • 5. LESS IS MORE 5 # Compiles to CSS # Programming features in CSS # Feels like writing CSS # CSS is valid LESS # LESS on Client # LESS on Server # Importing # Variables # Functions # Operations # Mixins # Nested Rules # Other features
  • 6. LESS ON CLIENT 6 <head> <link rel=“stylesheet/less” type=“text/css” href=“home.less” /> <script src=“js/less.js” type=“text/javascript”></script> </head>
  • 7. LESS ON SERVER 7 ASP.NET via NuGet >install-package dotless # Preferred More # Server Support # Node.js # ASP.NET # Rails # JSP
  • 8. BASIC LESS 8 @headerFontSize: 16px; // single line comments #nestedRules{ .childElements{ font-size: @headerFontSize; } }
  • 9. LESS VARIABLES 9 @redColor: red; //Named Colors @myFontSize: 4px; //px Unit @boxLineHeight: 2pt; //pt/em Unit @thatColor: #ffccff; //Hex colors @myFontType: Comic Sans, sans serif; //Strings @comValue: 2px solid green; //Complex strings Variables are actually constants in LESS. No reassignments. @boxLineHeight: @boxLineHeight + 2; //Doesn’t work
  • 10. LESS OPERATIONS 10 font-size: 10pt + 2; color: #fff / 4; width: (100% / 4) + 5%; font-size: @myFontSize + 4; color: @myRedColor / 10;
  • 11. LESS FUNCTIONS - COLORS 11 color: lighten(@myColor, 5%) color: darken(@myColor, 5%) color: saturate(@myColor, 5%) color: desaturate(@myColor, 5%) color: fadein(@myColor, 5%) color: fadeout(@myColor, 5%) color: fade(@myColor, 5%) color: spin(@myColor, 5%) color: mix(@myColor, #fff)
  • 12. LESS FUNCTIONS - MORE 12 @hue: hue(@myColor); @sat: saturation(@myColor); @light: lightness(@myColor); @alpha: alpha(@myColor); @newColor: hsl(10%, 5%, 30%); @roundMoney: round(9.99); @topMoney: ceil(19.45); @floorMoney: floor(29.90); @percentMoney: percentage(.5);
  • 13. LESS MIXINS 13 .rounded_corners(@curveSize) { border-radius: @curveSize; -moz-border-radius: @curveSize; -webkit-border-radius: @curveSize; } #myDiv { .rounded-corners(15px); } #myBox { .rounded-corners(5px); } # Reusable components # Look like Functions # Accepts parameters # Can set default values # Can be overloaded
  • 14. LESS MIXINS – DEFAULT VALUE 14 .rounded_corners(@curveSize: 5px) { border-radius: @curveSize; -moz-border-radius: @curveSize; -webkit-border-radius: @curveSize; } #myDiv { .rounded-corners(15px); } #myBox { .rounded-corners; }
  • 15. LESS MIXINS – OVERLOADS 15 .myBoxColor(@myColor) { color: @myColor; } .myBoxColor(@myColor, @changePer) { color: darken(@myColor, @changePer); } #myDiv { .myBoxColor(#ccc, 20%); }
  • 16. LESS MIXINS – GUARDS 16 .myBoxColor(@myColor) when (lightness(@myColor) >= 50%) { color: darken(@myColor, 50%); } .myBoxColor(@myColor) when (lightness(@myColor) < 50%) { color: lighten(@myColor, 50%); } #myDiv { .myBoxColor(#ccc); }
  • 17. LESS MIXINS – TYPE GUARDS 17 .myBoxWidth(@size) when (isnumber(@size)) { width: @size * 4; } .myBoxWidth(@size) when (ispercentage(@size)) { width: @size; } #myDiv { .myBoxWidth(30%); }
  • 18. LESS NESTED RULES 18 // LESS #navigation { float: right; font-size: 12px; ul { list-style-type: none; li { margin: 5px; } } } /* CSS */ #navigation { float: right; font-size: 12px; } #navigation ul { list-style-type: none; } #navigation ul li { margin:5px; }
  • 19. LESS NESTED RULES – COMBINATOR 19 a { color: red; &:hover { color: green; } } //output a { color: red; } a:hover { color: green; }
  • 20. LESS NAMESPACES 20 #forms-namespace { .submit-button { background-color: blue; border: 1px solid red; } } //namespaces for grouping, does not actually compile as CSS #my-submit-button { #forms-namespace > .submit-button; }
  • 21. LESS SCOPING 21 @myFontSize: 20px; #forms-namespace { @myFontSize: 15px; .submit-button { font-size:@myFontSize; // 15px; } } //Variables are Scoped //Mixins are also Scoped
  • 22. LESS STRING INTERPOLATION 22 @assets: “/assets/images/”; #form { background: url(“@{assets}mybackground.jpg”); } //Back quotes to execute JS @up-root: `”@{assets}”.toUpperCase()`;
  • 23. LESS SUMMARY 23 # Developer way of writing CSS # Maintainable CSS # Reusable and Readable Code # Structure CSS # Modularize CSS # Adds more to CSS
  • 24. Manish Shekhawat

×