less的介绍和应用

1.less的介绍
css预处理器，一种动态样式语言
2.less的安装
方法1：终端输入命令

cnpm install -g less

方法2：

方法3：使用百度CDN加载

3.less的应用
style.less代码如下：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

在终端输入
1.如果在终端输入如下代码：

lessc style.less

结果如下：

2.如果在终端输入如下代码

lessc style.less > ok.css

结果如下：

此时ok.css代码如下：

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

此时如果在终端输入命令如下：

cat ok.css

结果如下：

3.让浏览器直接解析less，而不是通过less编译成的css
文件夹目录如下：

index.html代码如下：

<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>
<div class="test">Hello less</div>

index.less代码如下：

// LESS

@color: #4D926F;

.test{
  color: @color;
}

注意：chrome浏览器不支持此方案(自测所得结论)

4.几个命令的小技巧：
在终端输入如下代码：

ls

结果如下：

5.监视模式
监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。
要使用它，只要在URL后面加上’#!watch’,然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。