CSS preprocessing less basic use, CSS preprocessing less use

CSS preprocessing less basic use, CSS preprocessing less use
APIhttp: // lesscss.cn variable @ variable name: variable value @ maincolor: # aeeeee; @ acolor: # ffffff; @ ht200: 200px; @ ht50: 50px; @ wh980: 980px; @ lht50: 50px; application header nav {background-color: @ maincolor; width: @ wh980; height: @ ht50;} compile header nav {background-color: # aeeeee; width: 980px; height: 50px;} Effect

 

Definition class. BRradius (@ radius: 5px) {border-radius: @ radius;} application header nav {background-color: @ maincolor; width: @ wh980; height: @ ht50; /* or */. BRradius ;. BRradius (10px);} compile header nav {background-color: # aeeeee; width: 980px; height: 50px; border-radius: 10px;} Effect

 

Nested rule // nested syntax header {// define less local variable // perform four arithmetic operations @ navcolor: @ maincolor-#111; width: 1024px; margin: 0 auto; nav {background-color: @ navcolor; width: @ wh980; height: @ ht50 ;. BRradius (10px); ul {list-style: none; li {float: left; width: 100px; line-height: @ lht50; a {color: @ acolor; text-align: center; text-decoration: none; display: block; // Add & resolve the same level element or this element pseudo Class &: hover {background-color: #8 DEEEE ;}}}}}} Page <! DOCTYPE html>  

Compile less

1. browser compilation less

Download less. min

<Script type = "text/javascript" src = "js/less. min. js"> </script>

2. nodejs Compilation

Http://www.nodejs.cn official site in the environment variables to add installation path using node installation and compilation less by command npm install less-g Global installation less use lessc command for less file compilation format: generate the css file directory for the target file directory of lessc