• Less是一门CSS预处理语言，扩展了CSS，增加了变量、Mixin、函数等特性。
• Less可运行在Node或浏览器端
• Less是一种动态的样式语言

原理

Less包含一套自定义语法和解析器，用于根据语法定义样式规则，规则最终通过解析器编译生成对应的CSS文件。

优势

• 变量 可在样式表中定义和更改值
• 动态计算
• Mixins 重用或组合样式
• 函数

开始

Less用JS编写，需额外的NodeJS或浏览器才能运行，推荐提前将less文件编译成css代码以加快解析速度。

# 安装Less
$ npm i -g less
# 安装最新版
$ npm i -g less@latest

使用

浏览器

<link rel="stylesheet/less" type="text/css" href="style.less"/>

# 引入Less
@import "style.less"

终端

# 终端编译
$ lessc style.less
$ lessc style.less > style.css

NodeJS

# 自动解析编译
var less = require('less');
less.render('.classname {width:1+1}', function(e, css){
  console.log(css);
});
# 手工解析编译
var parser = new(less.Parser);//解析器
parser.parse('.classname {width:1+1}', function(err,tree){
  if(err){
    return console.error(err);
  }
  console.log(tree.toCSS());
});

变量

• Less允许单独定义样式变量，需要时直接调用即可。
• Less中的变量为实际是完全的常量，所以只能定义一次。

$vim style.less
@color:#4D926F;
@nice-blue:#5B83AD;
@light-blue:@nice-blue + #111;
#header{
  color:@color;
}
#header h2{
  color:@light-blue;
}

混入

混合（Mixins）是将一系列属性从一个规则集引入（混入）到另一个规则集的方式。

.border{
  border-top:1px dotted black;
  border-bottom:2px solid black;
}
.menu a{
  color:#fff;
  .border;
}

Less能将class和id的样式应用到不同的选择器中。因此，可定义通用的属性集为一个class，然后在另一个class中调用它们。

#circle{
  background-color:#4CAF50;
  border-radius:100%;
}
#circle-sm{
  width:50px;
  height:50px;
  #circle;
}
#circle-bg{
  width:100px;
  height:100px;
  #circle;
}

Mixin支持传入参数

#circle(@size:25px){
  background-color:#4CAF50;
  border-radius:100%;
  width:@size;
  height:@size;
}
#circle-sm{
 #circle
}
#circle-bg{
  #circle(100px)
}

可定义不带参数的属性集合，若要隐藏属性集不让其暴露到CSS中，但又想在其他属性集中引用。

.wrap(){
  text-wrap:wrap;
  white-space:pre-wrap;
  wite-space:-moz-pre-wrap;
  word-space:break-word;
}
pre{
  .wrap
}

Mixin支持参数列表变量

@arguments 包含所有传递进来的参数

.box-shadow(@x:0, @y:0, @blur:1px, @color:#000){
  box-shadow:@arguments;
  -moz-box-shadow:@arguments;
  -webkit-box-shadow:@arguments;
}

Mixins支持模式匹配

根据传入的参数来改变混合的默认呈现效果

.mixin(@switch, @color){

}
.mixin(dark, @color){
  color:darken(@color, 10%)
}
.mixin(light, @color){
  color:lighten(@color, 10%)
}
.mixin(@_, @color){
  display:block;
}
.classname{
  .mixin(@switch, #888);
}
----------------------------------------------------------------------------------
@switch:light;
.classname{
  .mixin()@switch, #888);
}
----------------------------------------------------------------------------------
.classname{
  color:#a2a2a2;
  display:block;
}

导引混合

当根据表达式进行匹配而非根据值和参数匹配时，导引显得非常有用。为了尽可能保留CSS的可声明性，Less通过导引混合而非if/else实现条件判断。

嵌套

Less提供嵌套而非合并，用来模仿HTML。

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

@color-text:#000;
ul{
  @color-text:#fff;
  background-color:#03A9F4;
  padding:10px;
  list-style:none;
  li{
    color:@color-text;
    background-color:#fff;
    border-radius:3px;
    margin:10px 0;
  }
}

Less嵌套可在混合中包含伪类

.clearfix{
  display:block;
  zoom:1;
  &:after{
    content:" ";
    display:block;
    font-size:0;
    height:0;
    clear:both;
    visible:hidden;
  }
}

&符号的使用
若想写串联选择器而非后代选择器，可使用&，这对伪类尤为重要。

a{
  text-decoration:none;
  &:hover{
    border-width:1px;
  }
}

运算

任何数值、颜色和变量均可进行运算。

@base:5%;
@filter:@base * 2;
@other:@base + @base;

color:#888/4;
height:100% / 2 + $filter;

Less运算能分辨颜色和单位

函数

Less提供转换颜色、处理字符串、算术运算的函数。

@base:#f04615;
@width:0.5;

.classname{
  width:percentage(@width);
  color:saturate(@base, 5%);
  background-color:spin(lighten(@base, 25%), 8);
}

降低透明度

@color:#004590;
div{
  width:50px;
  height:50px;
  background-color:@color;
  &:hover{
    background-color:fadeout($color, 50%);
  }
}

颜色函数

Less提供颜色运算函数，颜色会先被转化为HSL色彩空间，然后在通道级别操作。

lighten($color, @percent);
darken($color, @percent);

saturate(@color, @percent)
desaturate(@color, @percent)

fadein(@color, @percent)
fadeout(@color, @percent)
fade(@coloe, @percent)

spin(@color, @size)

mix(@color1, @color2)

提取颜色信息

hue(@color)
saturation(@color)
lightness(@color)

在一种颜色通道上创建另一种颜色

#@new将保持@old的色调，但具有不同饱和度和量度。
@new:hsl(hue(@old), @percent, @percent)

数学函数

round(@number)
ceil(@number)
floor(@number)
percentage(@number)

命名空间

为了更好组织CSS或单纯为了封装，将一些变量或混合模块打包起来。

#bundle{
  .btn(){
    display:block;
    border:1px solid black;
    background-color:grey;
    &:hover{background-color:white;}
  },
  .tab{...}
  ...
}
# 访问
#header a{
  color:orange;
  @bundle>.btn;
}

命名空间内声明的变量将只作用域该命名空间，在作用域外通过相同的语法是无效的，一般用来引用给一个混合。

作用域

Less的编译器首先会在局部变量中查找变量和混合，若无编译器会在父作用域中查找，依次类推。

@color:red;
#page{
  @color:white;
  @header{
    color:@color;
  }
}
#footer{
  color:@color;
}

由于存在作用域所以Less中的变量名是会重复的

注释

Less支持单行注释\\，在编译阶段会自动被过滤掉。
Less支持CSS形式注释，即多行注释\**\。

导入

可使用@import导入一个.less文件，其扩展名是可选的。可将外部的文件引入到本地中使用。

导入参数

• @import(reference) "filepath"
  将引入的文件作为样式库使用，文件中的样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
• @import(inline) "filepath"
  用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，而是直接输出。
• @import (css) "filepath"
  当前操作为css中的@import，当前文件会输出一个样式文件，而被引入的文件自身作为一个独立的样式文件。
• @import (less) "filepath"
  默认配置项，引入文件为less文件。
• @import(once) "filepath"
  默认配置，表示对相同资源仅引用一次。
• @import (multiple) "filepath"
  表示对同一资源可引入多次