Less stylesheet


I. Installation

Less was construct under javascript so in modern web design we use nodejs as base system to use less.to install less , we run command like below :

npm install -g less

 

II. Basic Usage

in less stylesheet , you can use variable , loop , condition and much more that you cannot use normally in css.we test with variable.let create a test.html with code below :

<!doctype html>
   <head>
      <link type="text/css" rel="stylesheet" href="style.css" />
   </head>
   <body>
      <h1>Hello World !!!!</h1>
   </body>
</html>

Note : in the head you see style.css not style.less . why ? because style.css is the result of style.less after compiled in javascript.

now let create our style.less with code below

@pagecolor: #FF7F50;
@itemcolor:#800080;
body {
   color: @pagecolor;
}

h1 {
   color: @itemcolor;
}

 

now let compile it

// this is commmand to compile

lessc style.less

// this is result below when compile

body {
  color: #FF7F50;
}
h1 {
  color: #800080;
}

as you can see , when we compile style.less it will who result on terminal like above and it wasn't saved to any file. so to save to file , just add file name that you want to save like below

lessc style.less style.css

than you can test like alway for html (double click and run)!!! . but for what is the tricky thing is less can be intergrate with app like angular , vue.js ...etc.less mostly for developer is use in code rendering ( return on request like rest ) but you need to dig deep to understand its algorithms before play big thing because it is very flexible and complexing.

for using in code like nodejs :

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, output) {
  console.log(output.css);
});

 

III.Feature

Nested

/*this is code in less*/

.container {
   .item {
      color:#FF78CA;
   }
   span {
      font-size: 25px;
   }

   .nextclass {
      h1 {
         font-size: 25px;
      }
      p {
         background:#3C7949;
      }
   }
}


/*This is result*/

.container .item {
   color:#FF78CA;
}

.container span {
   font-size: 25px;
}

.container .nextclass h1 {
   font-size: 25px;
}

.container .nextclass p {
   background:#3C7949;
}

 

Operation

you can calulate in less (but not like calc() function in css , it just pre-load exucute and throw result to css)

/*this is less*/

@fontSize: 10px;
.actclass {
   font-size: @fontSize * 2;
}

/*this is result*/

.actclass {
   font-size: 20;
}

 

i just show few example for understanding . if you want for more detail you can go to less website .

Thank you for reading

Share this Post:

Related Posts:

www.000webhost.com