Less css framework
- 2. www.tothenew.com Agenda ● What is CSS preprocessor? ● Why CSS Preprocessor? ● CSS preprocessor in market ● Less Features ○ Variables ○ Mixins ○ Extends ○ Nesting ○ Functions and Operations ○ Branching/looping ○ Imports ● Drawbacks
- 3. www.tothenew.com What is CSS preprocessor? ● A preprocessor is a program that takes one type of data and converts it to another type of data. In case of HTML and CSS, some of the more popular preprocessor languages include Haml and Sass . Haml is processed into HTML and Sass is processed into CSS. ● CSS preprocessors are extension languages that compile into CSS ● CSS preprocessor helps you write maintainable, future-proof code and it will seriously reduce the amount of CSS you have to write.
- 4. www.tothenew.com Why CSS preprocessor? ● It makes your CSS DRY (Don't repeat yourself) ● CSS is more organized ● Saves you time ● Many CSS preprocessor features like ○ Variables for maintainability ○ Mixins improves reusability ○ @extend reduces redundant rules ● Frameworks that supercharge your CSS
- 7. www.tothenew.com Less Framework ● Less is a CSS pre-processor, adding features that allow you to make CSS that is more maintainable, theamable and extendable. ● As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. ● Less runs inside Node, in the browser and inside Rhino. ● Less Framework is called "a CSS grid system for designing adaptive websites" ● It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. ● This framework is more adaptive than responsive. Responsive on top Adaptive on bottom
- 8. www.tothenew.com Try your own Online compiler: http://less2css.org/
- 9. www.tothenew.com Variables ● Control commonly used values in a single location. ● Can be used with ○ Variable Name ○ Selectors ○ URLs ○ Property Names ○ Import Statements ● Variables are lazy loaded and do not have to be declared before being used. // library @base-color: green; @dark-color: darken(@base-color, 10%); // use of library @import "library.less"; @base-color: red;
- 10. www.tothenew.com Mixins ● Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. ● "mix-in" properties from existing styles ● You can also create a mixin that does not shows in output by putting parentheses after it .Border() { border: .2em solid #479A4A; &:hover { border: 1px solid red; } } .Round { border-radius:9999px; margin-left: 20px; background: darken(#00ff00, 20%); } #shape1 { .Round; } #shape1 { border-radius:9999px; margin-left: 20px; background: darken(#00ff00, 20%);; }
- 11. www.tothenew.com Mixins Parameter ● Mixins can take parameters or set default Values to them. ● A mixin reference can supply parameters values by their names instead of just positions .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } .class1 { color: #33acfe; margin: 20px; padding: 20px; } .class2 { color: #efca44; margin: 10px; padding: 40px; }
- 12. www.tothenew.com Mixin and CSS Guard ● Guards are useful when you want to match on expressions, as opposed to simple values or arity. ● You can also create a mixin that does not shows in output by putting parentheses after it ● & is used to group multiple selectors into guard statement .my-optional-style() when (@my-option = true) { button { color: white; } } .my-optional-style(); button when (@my-option = true) { color: white; } .mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; } .class1 { .mixin(#ddd) } .class2 { .mixin(#555) } .class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; }
- 13. www.tothenew.com Extends ● Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references. ● The extend is either attached to a selector or placed into a ruleset. It looks like a pseudo-class with selector parameter optionally followed by the keyword all ● It can contain one or more classes to extend, separated by commas. .a:extend(.b) {} // the above block does the same thing as the below block .a { &:extend(.b); } .c:extend(.d all) { // extends all instances of ".d" e.g. ".x.d" or ".d.x" } .c:extend(.d) { // extends only instances where the selector will be output as just ".d" }
- 14. www.tothenew.com NestingRules ● Nesting is supposed to make your CSS easier to read, extend, and maintain. ● Nesting can be done on pseudo-classes with & ● Directive is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling. a { color: red; &:hover { color: blue; } } a { color: red; } a:hover { color: blue; } .screen-color { @media screen { color: green; @media (min-width: 768px) { color: red; } } @media tv { color: black; } } @media screen { .screen-color { color: green; } } @media screen and (min-width: 768px) { .screen-color { color: red; } } @media tv { .screen-color { color: black; } }
- 15. www.tothenew.com Functions and Operations ● Less provides a variety of functions which transform colors, manipulate strings and do maths. ● Arithmetical operations +, -, *, / can operate on any number, color or variable. @base: #f04615; @width: 0.5; .class { width: percentage(@width); color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); } .class { width: 50%; color: #f6430f; background-color: #f8b38d; } // numbers are converted into the same units @conversion-1: 5cm + 10mm; // result is 6cm @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // result is 4px // example with variables @base: 5%; @filler: @base * 2; // result is 10% @other: @base + @filler; // result is 15% @base: 2cm * 3mm; // result is 6cm @color: #224488 / 2; //results in #112244 background-color: #112244 + #111; // result is #223355
- 16. www.tothenew.com Branching and Looping ● You can also specify a condition in LESS ● In LESS, a mixin can call itself. .loop(@counter) when (@counter > 0){ .loop((@counter - 1)); .border-@{counter} { border: 1px * @counter solid blue; } } .loop(4); .border-1 { border: 1px solid blue; } .border-2 { border: 2px solid blue; } .border-3 { border: 3px solid blue; } .border-4 { border: 4px solid blue; } .set-bg-color (@text-color) when (lightness(@text-color) >= 50%) { background: black; } .set-bg-color (@text-color) when (lightness(@text-color) < 50%) { background: #ccc; } .box-1 { color: #BADA55; .set-bg-color(#BADA55); } .box-1 { color: #BADA55; background: black; }
- 17. www.tothenew.com Imports ● @import is used to include a file in to another. ● @import statements may be treated differently by Less depending on the file extension: ○ If the file has a .css extension it will be treated as CSS and the @import statement left as-is (see the inline option below). ○ If it has any other extension it will be treated as Less and imported. ○ If it does not have an extension, .less will be appended and it will be included as a imported Less file ● @import (reference) is used to import external files, but without adding the imported styles to the compiled output unless referenced. @import "foo"; // foo.less is imported @import "foo.less"; // foo.less is imported @import "foo.php"; // foo.php imported as a less file @import "foo.css"; // statement left in place, as-is
- 18. www.tothenew.com Imports (Option) ● @import is used to include a file in to another. Syntax: @import (keyword) "filename"; ● The following import directives have been implemented: ○ reference: use a Less file but do not output it ○ inline: include the source file in the output but do not process it ○ less: treat the file as a Less file, no matter what the file extension ○ css: treat the file as a CSS file, no matter what the file extension ○ once: only include the file once (this is default behavior) ○ multiple: include the file multiple times ○ optional: continue compiling when file is not found ● Multiple options can be use seperated through comma.
- 19. www.tothenew.com Drawbacks ● Debugging is harder ● Compilation takes time ● CSS is not a programming language ● Makes your code more complex if not used properly
- 20. Thank You