CSS Less framework overview, Pros and Cons

{less}
It's CSS, with just a little more.

LESS Framework
Overview, pros and cons..
Sanjoy K. Paul
Lead Application Developer, DevOps
SanjoyPaul.com | hello@skpaul.me | +880-1511-927992

What is Less Framework?
Less (Leaner Style Sheets) is a backwards-compatible language extension for CSS.
- Less.js, the JavaScript tool that converts your Less styles to CSS styles.
- Less looks just like CSS, so it is easy to learn.
- Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned
so quickly.
- Cleaner and more readable code can be written in an organized way.
- We can deﬁne styles and it can be reused throughout the code.
- LESS is an agile tool that sorts out the problem of code redundancy.
LESS was designed by Alexis Sellier in 2009 and published as an open-source. The ﬁrst version of LESS was written in
Ruby; in the later versions, the use of Ruby was replaced by JavaScript.

What does Less add to CSS?
We will go through a quick overview of features.
- Comments
- Importing
- Variables
- Mixins
- Nesting
- Nested At-Rules and Bubbling
- Operations
- Escaping
- Namespaces and Accessors
- Maps
- Scope

Comments in Less
Both block-style and inline comments may be used
/* One heck of a block
* style comment! */
@var: red;
// Get in line!
@var: white;

Importing in Less
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The
extension is optionally specified for .less files.
@import "library"; // library.less
@import "typo.css";

Variables in Less
Variables are pretty self-explanatory, these are same as in other programming languages (i.e.: JavaScript/C/C++/Java).
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
:root{
--width: 10px;
--height: var(--width) +
10px;
}
#header {
width: var(--width);
height: var(--height);
}

Mixins in Less
A way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
Parametric Mixins:
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
Functions, Guards, Passing Rulesets

Nesting in Less
Less gives you the ability to use nesting instead of, or in combination with cascading.
CSS Code
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
LESS Code
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
Code is more concise, and mimics the structure of the HTML.

Nesting in Less
We can also bundle pseudo-selectors with our mixins using this method. Here's the classic clearﬁx hack, rewritten as a
mixin (& represents the current selector parent):
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
a {
color: blue;
&:hover {
color: green;
}
}
a {
color: blue;
}
a:hover {
color: green;
}

Nested At-Rules and Bubbling in Less
At-rules such as @media or @supports can be nested in the same way as selectors. The at-rule is placed on top and
relative order against other elements inside the same ruleset remains unchanged.
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image : url(/img/retina2x.png );
}
}
width: 800px;
}
}
.component {
width: 300px;
}
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image : url(/img/retina2x.png );
}
}
.component {
width: 800px;
}
}

Operations in Less
Arithmetical operations (+, -, *, /) can operate on any number, color or variable.
- If it is possible, mathematical operations take units into account and convert numbers before adding,
subtracting or comparing them.
- The result has leftmost explicitly stated unit type.
- If the conversion is impossible or not meaningful, units are ignored.
- Multiplication and division do not convert numbers. It would not be meaningful in most cases - a length
multiplied by a length gives an area and css does not support specifying areas.
- Less operates on numbers as they are and assign explicitly stated unit type to the result.
- Less allows us to do arithmetical operation on colors (#224488 / 2 = #112244)
Let’s see some example..

Operations in Less
Example: Impossible conversion: px to cm or rad to %.
// 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%
Example: Multiplication and division do not convert numbers.
@base: 2cm * 3mm; // result is 6cm
Example: Arithmetic on colors
@color: #224488 / 2; //results in #112244
background-color
: #112244 + #111; // result is #223355
Example: Colors functions
saturate(hsl(90, 80%, 50%), 20%) =>#80ff00 // hsl(90, 100%, 50%)
lighten(hsl(90, 80%, 50%), 20%) => #b3f075 // hsl(90, 80%, 70%)
darken(hsl(90, 80%, 50%), 20%) => #4d8a0f // hsl(90, 80%, 30%)
fade(hsl(90, 90%, 50%), 10%) => rgba(128, 242, 13, 0.1) //hsla(90,
90%, 50%, 0.1)

Operations (calc() exception) in Less
calc() function does not evaluate math expressions for CSS compatibility, but it evaluates variables and math in nested
functions.
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // output is calc(50% + (25vh - 20px))

Functions in Less
Less provides a variety of functions which transform colors, manipulate strings and do maths
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color
: spin(lighten(@base, 25%), 8);
}
Using them is pretty straightforward.
This example uses
percentage to convert 0.5 to 50%,
increases the saturation of a base color by 5%
and then sets the background color to one that is lightened
by 25% and spun by 8 degrees.

Namespaces and Accessors in Less
Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You
can do this pretty intuitively in Less.
Example: if we want to bundle some mixins and variables under
#bundle, for later reuse or distributing.
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color
: grey;
&:hover {
background-color
: white;
}
}
.tab { ... }
.citation { ... }
}
Now if we want to mixin the .button class in our #header a, we
can do
#header a {
color: orange;
#bundle.button(); // can also be written as
#bundle > .button
}
Note: append () to your namespace (e.g. #bundle()) if you don't
want it to appear in your CSS output i.e. #bundle .tab.

Escaping in Less
Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything'
is used as is with no changes except interpolation.
@min768: ~"(min-width: 768px)"
;
.element {
@media @min768 {
font-size: 1.2rem;
}
}
.element {
font-size: 1.2rem;
}
}
In Less 3.5, you can simply write. In 3.5+, many cases previously requiring "quote-escaping" are not needed.
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}

Maps in Less
We can also use mixins and rulesets as maps of values
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
.button {
color: blue;
border: 1px solid green;
}

Scope in Less
Scope in Less is very similar to that of CSS. Variables and mixins are ﬁrst looked for locally, and if they aren't found, it's
inherited from the "parent" scope.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}

Installing, conﬁguring and usages of Less
- Command Line Usag
- https://lesscss.org/usage/#command-line-usage
- Browser Usage
- https://lesscss.org/usage/#using-less-in-the-browser
Supports:
- Less.js supports all modern browsers (recent versions of Chrome, Firefox, Safari, IE11+, and Edge).
- It is possible to use Less on the client side in production, please be aware that there are performance implications for
doing so (although the latest releases of Less are quite a bit faster).
- Sometimes cosmetic issues can occur if a JavaScript error occurs. This is a trade off of ﬂexibility vs. speed.
- For the fastest performance possible for a static web site,
- We recommend compiling Less on the server side.

To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less"
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Next, download less.js and include it in a <script></script> tag in the <head> element of your page
<script src="less.js" type="text/javascript" ></script>
Need to keep in mind:
- Make sure you include your stylesheets before the script.
- When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you
deﬁne in a stylesheet are not accessible in any other.
- Due to the same origin policy of browsers, loading external resources requires enabling CORS

You can set options either programmatically, by setting them on a less object before the script tag - this then affects all initial link tags and
programmatic usage of less.
<script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers
: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>
The other way is to specify the options on the script tag, e.g.
<script>
less = {
env: "development"
};
</script>
<script src="less.js" data-env="development"></script>
Or for brevity they can be set as attributes on the script and link tags
<script src="less.js" data-poll ="1000" data-relative-urls ="false"></script>
<link data-dump-line-numbers ="all" data-global-vars ='{ "myvar": "#ddffee", "mystr": ""quoted"" }' rel="stylesheet/less"
type="text/css" href="less/styles.less" >

Pros and Cons of Less
???
Cons:
- The learning curve
- Could inherit mistakes of framework
developer
- Could lead to a lack of understanding the
underlying css
- Bloated code
- Might restrict you as you conform to the
framework
- Lack of semantic code
Pros:
- Increased productivity
- Standardized codebase
- Makes it easier to work with a team
- Provides a more organized approach to
css
- Publicly released frameworks are
improved by the community
- Fewer mistakes
- Cross browser reliability
- Can be a learning tool

Would you like to learn more about Less?
- Overview: http://lesscss.org/
- Usages: https://lesscss.org/usage/#using-less-in-the-browser
- Functions: https://lesscss.org/functions/
- Features: https://lesscss.org/features/
- Tools: https://lesscss.org/tools/
- Editors and Editor Plugins: https://lesscss.org/tools/#editors-and-plugins
- Contributing?: https://lesscss.org/usage/#developing-less
- More: https://www.tutorialspoint.com/less/index.htm

CSS Less framework overview, Pros and Cons

More Related Content

CSS Less framework overview, Pros and Cons