CSS pre-compilation: Less Getting Started

Less precompilation is backwards compatible with CSS and extends functionality for the current CSS.

Less official website is the best Learning Resource.

This article is a overview for less, only as a preliminary understanding. Because the official website is English, so I also try to conform to its expression to avoid ambiguity.

Variables

Use variables for more comprihensible code:

{  color: @light-blue;}

And the Output is:

{  color: #6c94be;}

Mixins

Mixins is a including a bunch of properties you can use from one rule-set to Anthor. See the Fllowing CSS:

{  border-top: dotted 1px black;   border-bottom: solid 2px black;}

If we want use the properties in other Rule-set, just drop in the name of the CSS where we want use it,like so:

{  color: #111;   . bordered;}  {  color: red;  . bordered;}

Now the properties would apear in #menu a. Post. It ' s convenient.

Nesting

We also has the ablities to use nesting instead's for more concise code:

{  color: black;   . Navigation {    font-size: 12px;  } {width: 300px;    }     }

It ' s mimics the structrue of your HTML.

We can also bundle pseudo-sectors with Mixins using the This method. For example,the classical clearfix hack.

{  display: block;   Zoom: 1;   &: After{    content: "";     Display: block;     font-size: 0;     height: 0;     Clear: both;     Visibility: hidden;  } }

Nested At-rules and bubbling

At-rules such as @media or @support can be also nested.

The at-rule in the top are relative order against other elements inside the same ruleset remains unchanged.

{  width: 300px;   @media (min-width: 768px) {    width:600px;     @media  (min-resolution: 192dpi) {      background-image:url (/img/retina2x.png);    }   }  {    width: 800px;  } }

Operations

Arthmatical operations can is operated in any number.

Numbers is 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%

But notice problems like these:

@base: 2cm * 3mm; Result is 6cm//does arithemtic on colors: @color: #224488/2; Results in #112244background-color: #112244 + #111; Result is #223355

Calc () exception

For CSS compatibility, Calc () can isn't evaluate math expression, but would evaluate variables and math in nested function.li Ke so:

@var: 50vh/2;width:calc (50% + (@var -20px));  Result is calc (50% + (25vh-20px))

Escaping

This allows the Arbitratry strings as property or variable value with the no change. Anything in ~ "anything" or ~ ' anthing ' can work.

{  @media @min768 {    font-size: 1.2rem;  } }

Functions

Less provide a variety of function to handle with transform colors or manipulate strings or does maths.if you want More,see Function Reference.

Namespaces and accessors

Anytime you want group your mixins the can do this intuitively in less.

{  . button {    display: block;     Border: 1px solid black;     background-color: Grey;     &:hover {      background-color:white    }  }  {  }  {}}

Now if-you use them

{  color: Orange;   #bundle >. button;  Can also be written as #bundle. Button}

Scope

Scope in less was as same as other programming lanuage like Javascript.variables and mixins be fitst looked for Locally,an D if not found, the compiler would look in the parent Scope,and so on.

Comments

Just like CSS.

Importing

How is it can be?

CSS pre-compilation: Less Getting Started