Pranay Rana: CSS to Less

CSS to Less - It's about what are the motivating factor, which Less have that encourage developer to make use of this extended languages. Below post is not provide details information about Less, it provide introduction to features provided by Less. Post is helpful to those who are looking for brief introduction to features of Less, higher language developer who work sometimes with CSS and for the beginner.

CSS

CSS (Cascading style sheet) - it used with HTML element to to beautify web pages of web application. It use to define set of style(s) (i.e set of style rules), for mostly each element in web page to beatify each element. Style defined with CSS , gives each element same look. For Example

h1 {
 Color: red;
}

this style rule give each h1 element black color. If style changes i.e. color changed from read to green then it will affect all h1 element in web pages of web application.

Above brief explanation of what is CSS and why to use it in web application (find full details: https://www.w3.org/Style/CSS/Overview.en.html).

Following problem arise once CSS implemented for application

Every style rule go in one file, File size increases.
Modification becomes difficult Ex. same color used in multiple styles then one need to go every where and need to modify it.
If style sheet divided in multiple style sheet , browser create multiple request to download each individual CSS file.
If style sheet divided in multiple files then , modification of common color, font used becomes too difficult.
Nested element or Pseudo Style rules are difficult to understand and maintain as CSS file increases.

Less

Less (Leaner style sheet) which is CSS extension. Less, have features like allow to define Variables & Mixins (like functions), Set of Inbuilt function, Support for arithmetic operators, Tools supported Create single CSS file as output from multiple Less files etc. So feature provided by Less is some what equal to programming language and that in turn very much helpful to developer who are working more on programming language & less on CSS styles.

Browser only understand HTML + Javascript + CSS style rules when loading web page of application, which means that it doesn't understand Less. So, Like Typescript transpile to Javascript with help of transpilers. Less style rules get converted to CSS style rules as output by various available transpilers/compilers (check list here : http://lesscss.org/tools/#online-less-compilers).

Following way Less helps to overcome problem associated with CSS.

Difficulty in modification of style property which having same value and located in different rules. Ex. Colors, Font-Size, etc.

For example below CSS, each element style rule have color property. Now if there is need of changing this color value "#003152" to "red". As part of color changing exercise CSS developer needs to locate each rule and have to replace color value to red.
```
h1 {
 color: #003152;
}
body {
    color: #003152;
}
a:active {
    color: #003152;
}
```
Locating each rule and changing color to "red" can lead to a problem if CSS file size is big or if the CSS style rules are located in different files.

Solution - Less Variables
This can be resolve in Less by making use of variable, as given in below code.
```
@color: #003152;

h1 {
 color:@color;
}
body {
    color: @color;
}
a:active {
    color: @color;
}
```
So one value of color stored in variable , change needs be done is change value of variable.
Other use cases of variable is as below
```
@color: red;
@background-color: black;
@base-font-size : 10px;
@images: "./assets/images";
@font-family: "Times New Roman", Times, serif";

h1 {
 font-size: @base-font-size + 10px;
}
body {
    color: @color;
    font-family: @font-family;
    font-size: @base-font-size;
    background-color: @background-color;
}
.input {
  font-size: @base-font-size + 2px;
}
a:active {
    color: @color;
    font-size: @base-font-size + 2px;
}
.button {
  background-image: url("@{images}/backimage.ico");
}
```
Point to not in above Less code
- As listed in above variable in LESS , allows to store color values, string values, numeric values alone and with units (like %, px, etc.).
- Less allows to perform numeric operation like =, - on numeric values Ex. @base-font-size stores numeric value and + operation performed in .input,he style rules.
- Less allows string interpolation , Ex. in above code @image variable defines path , which can be used any where like used in .button style rule
Advantage
- Less Variable allows to store common values which can be used in multiple style rules not in single file but one can use same variable in multiple files (how to use in multiple files discussed below).
- Developer can store common and keep changing values in variable, so if have to perform modification just changing variable works.
- Less variable can easily allows to achieve multiple colored base Theme as just changing variable values different value is easy task.
- Variables in Less makes life too easy for developer who is working on CSS , specially those developer who are working on programming language like C#,java and some time work with CSS.
CSS style rules with common property need to be repeated in each rule.

In CSS even though multiple style rules use same property and with same value , its required to be repeated that in each style rule as given in below example
```
input {
    font-size: 12px;
    background-color: white; 
    height: 20px;
}

select {
    font-size: 12px;
    background-color: white; 
    height: 25px;
}

select[multiple] {
    font-size: 12px;
    background-color: white; 
    height: 250px;
}
```
so in above example each property get repeated for different input elements except height property which is having different value.

Solution - Less Mixins
Less solves this problem by providing Mixins. Below code show how Mixins solve problem of common properties.
```
.input-base {
    font-size: @base-font-size + 2px;
    background-color: @input-backcolor; 
}

input {
    .input-base();
    height: 20px;
}

select {
    .input-base();
    height: 25px;
}

select[multiple] {
    .input-base();
    height: 250px;
}
```
so in style rules , .input-base is treated as Mixin which get called by all input style rules just to make use of common properties.

Mixins like function in programming language , takes argument as input and also allows arguments with default value as in below code.
```
.input-base (@height, @font-size: @base-font-size) {
    font-size: @font-size + 2px;
    background-color: @input-backcolor; 
    height:  @height;
}

input {
    .input-base(20px);
}

select {
    .input-base(25px);
}

select[multiple] {
    .input-base(250px, @base-font-size + 2px);
}
```
So in above code Mixin .input-base takes two argument like function as input. Based on input value Mixins copy property values to given style rule.

Less Extend
Less also have one another way for above problem, which making use of &:extend(.stylerule), like as given in below code.
```
.input-base {
    font-size: @base-font-size + 2px;
    background-color: @input-backcolor; 
}

input {
    &:extend(.input-base);
    height: 20px;
}

select {
    &:extend(.input-base);
    height: 25px;
}

select[multiple] {
    &:extend(.input-base);
    height: 250px;
}
```
as name suggest extend , it extends CSS style rule. It's similar to inheritance in higher level programming language like C#,Java.

Difference between &:extends and Mixins are
- Mixins works like function i.e. takes argument as input, which is not possible with extend.
- The way CSS generated by Mixins and Extend.
  
  Mixins generate CSS as below
```
input {
    font-size: 12px;
    background-color: white; 
    height: 20px;
}

select {
    font-size: 12px;
    background-color: white; 
    height: 25px;
}

select[multiple] {
    font-size: 12px;
    background-color: white; 
    height: 250px;
}
```
  So Mixins copies each properties in each style rule , so it increase size of style sheet.
  
  Extend generate CSS as below
```
.input-base,
input,
select,
select[multiple] {
  font-size: 12px;
  background-color: white;
}
input {
  height: 20px;
}
select {
  height: 25px;
}
select[multiple] {
  height: 250px;
}
```
  So extend generate less style sheet and instead of copying each property in each style rule it actually extends existing style rule.
Difficulty in maintaining Nested element style rules.

In html document consist of nested element (like parent-child element). CSS allows to set style rule for this nested element relationship Example. <li> child element under parent <ui> or <a> child element under <li> , <li> child element under parent <ui>. Example given below
```
<ul>
  <li>
    <a href="http://google.com/" rel="noopener" target="_blank">google</a>
  </li>
  <li>
    <a href="http://localhost:8080/abc.com" rel="noopener" target="_blank">Test</a>
  </li>
</ul>
```
Below is style rules for nested elements
```
ul li {
  font-size: 13px;
  color: red; 
}
```
```
ul li a {
  font-size: 13px;
  color: blue; 
}
```
Problem with above is very difficult to understand and read if developer is not aware of CSS nested styling rules.

Less allows to write this nesting style rules as below which is easy to understand nesting (parent-child relation) and read.
```
ul {
    li {
       a {
          font-size: @base-font-size;
           color: @font-color;
        }
    }
}
```
Above structure of CSS easily tell that a is child of li, and li is child of ui. and this will get apply to nesting structure which is like ui --> li --> a.
Difficulty with managing element pseudo style rules.

CSS force to write separate rules for each pseudo class like anchor tag a element which allows to add style rule on focus or hover or input element allows to add style rule for focus.

Example CSS style rules for anchor tag a & hover on anchor tag, and input tag & focus on input
```
a {
  color: #b3b3b3;
}
a:active {
  color: #003152;
}
input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
  border: 2px solid green;
}
```
Solution - Less nesting rules can easily encapsulate pseudo element style rules as given below.
```
input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
  &:focus {
     width: 250px;
     border: 2px solid green;
  }
}

a {
  color: #b3b3b3;
  &:active {
    color: #003152;
  }
}
```
Allows to in smaller manageable CSS files

CSS allows to create smaller style rules files separately for different part of page like

global.CSS
navbar.CSS
form-element.CSS
etc.

and with help of import statement CSS allows to import this files in each other or in one file. Example :

In Application.CSS
@import "global.css";
@import "navbar.css";
@import "form-element.css";

But disadvantage are
- Separate http request got created for each file when application loaded in browser and it will increase network traffic. Which means CSS doesn't combine all CSS file in one file.
- One more disadvantage is if there need of changing common property like color , one needs to open each file and have locate style property to make change.
Less allows importing of files same as CSS , but in LESS tools merge all different files as generate single CSS file.

global.less
variables.less ( this file contains all variables which is used by common properties like color, font-size, background color etc.)
navbar.less
form-element.less

In Application.CSS
@import "variables"
@import "global"
@import "navbar"
@import "form-element"

this will generate one file only, which get downloaded in on http reuqest. And as all common property value is replaced by variables which is stored in variable.less file , managing and changing common properties also becomes easy.
Less having some set of inbuilt function.

Less have lot of inbuilt function that also very helpful, which are also helpful.

Example: below function helps to get different colors.
```
color: darken(@body-color, 20%);
border-color: lighten ( @body-color, 20%);
```
there are lot of different function in Less helps in build styles for properties, find all functions here : http://lesscss.org/functions/

Conclusion
CSS allows to beautify html pages but extension like Less is very helpful. Less helps to overcome issues one face with CSS, also provide easy to understand, manage and simplify style rules with the help of feature like variables, mixins, extends, nesting structure, in build set of functions etc. However above is just start or overview of Less. Read in depth here : http://lesscss.org/features/

Pages

Saturday, August 18, 2018

CSS to Less

1 comment:

Followers

Facebook Badge