Introduction to LESS

858
-1

Published on

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
858
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to LESS

  1. 1. Introduction to LESS DYNAMIC STYLESHEET LANGUAGE – COMPILES TO CSS 1
  2. 2. AGENDA 2 # Problems writing plain CSS # LESS
  3. 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. 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. 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. 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. 7. LESS ON SERVER 7 ASP.NET via NuGet >install-package dotless # Preferred More # Server Support # Node.js # ASP.NET # Rails # JSP
  8. 8. BASIC LESS 8 @headerFontSize: 16px; // single line comments #nestedRules{ .childElements{ font-size: @headerFontSize; } }
  9. 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. 10. LESS OPERATIONS 10 font-size: 10pt + 2; color: #fff / 4; width: (100% / 4) + 5%; font-size: @myFontSize + 4; color: @myRedColor / 10;
  11. 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. 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. 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. 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. 15. LESS MIXINS – OVERLOADS 15 .myBoxColor(@myColor) { color: @myColor; } .myBoxColor(@myColor, @changePer) { color: darken(@myColor, @changePer); } #myDiv { .myBoxColor(#ccc, 20%); }
  16. 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. 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. 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. 19. LESS NESTED RULES – COMBINATOR 19 a { color: red; &:hover { color: green; } } //output a { color: red; } a:hover { color: green; }
  20. 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. 21. LESS SCOPING 21 @myFontSize: 20px; #forms-namespace { @myFontSize: 15px; .submit-button { font-size:@myFontSize; // 15px; } } //Variables are Scoped //Mixins are also Scoped
  22. 22. LESS STRING INTERPOLATION 22 @assets: “/assets/images/”; #form { background: url(“@{assets}mybackground.jpg”); } //Back quotes to execute JS @up-root: `”@{assets}”.toUpperCase()`;
  23. 23. LESS SUMMARY 23 # Developer way of writing CSS # Maintainable CSS # Reusable and Readable Code # Structure CSS # Modularize CSS # Adds more to CSS
  24. 24. Manish Shekhawat

×