CSS预编译：less入门

LESS预编译是向下兼容CSS并且为当前CSS扩展功能。

LESS官网就是最好的学习资源。

这篇文章是对LESS的一个Overview,仅作为初步了解。因为官网是英文，所以我也尽量顺应它的表达避免歧义。

Variables

use variables for more comprihensible code:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

and the Output is:

#header {
  color: #6c94be;
}

Mixins

mixins are a way of including a bunch of properties you can use from one rule-set to anthor .See the fllowing css:

.bordered {
  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 css where we want use it,like so:

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

now the properties will apear in #menu an .post. It's convenient.

Nesting

we also have the ablities to use nesting instead of for more concise code:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

it's mimics the structrue of your HTML.

we can also bundle pseudo-sectors with mixins using this method.For example,the classical clearfix hack.

.clearfix {
  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 is relative order against other elements inside the same ruleset remains unchanged.

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

Operations

 arthmatical operations can be operated in any number.

// 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%

but notice problems like these:

@base: 2cm * 3mm; // result is 6cm


// do arithemtic on colors:

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

calc() exception

for CSS compatibility ,calc() can not evaluate math expression, but will evaluate variables and math in nested function.like so:

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

Escaping

this allows you to use arbitratry strings as property or variable value with no change.Anything in ~"anything" or ~'anthing' can work.

@min768: ~"(min- 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

Functions

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

Namespaces and Accessors

anytime you want group your mixins you can do this intuitively in LESS.

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

now if you use them in other place ,do like so:

#header a {
  color: orange;
  #bundle > .button;  // can also be written as #bundle.button
}

Scope

scope in LESS is as same as other programming lanuage like JavaScript.variables and mixins are fitst looked for locally,and if not found ,the compiler will look in parent scope,and so on.

Comments

Just like CSS.

Importing

how it can be?