开启高大效前端开发之旅：Less安装与配置全攻略

你是不是曾为繁杂的CSS样式而烦恼？Less的出现，为前端开发者带来了新鲜的福音。今天就让我们一起探讨怎么安装Less，开启高大效的前端开发之旅。

一、 安装Node.js与npm

Less是一个基于Node.js的工具，所以呢先说说需要安装Node.js和npm。你能从下载并安装最新鲜版本的Node.js。

二、 安装Less

安装优良Node.js后打开命令行工具，施行以下命令安装Less：

npm install -g less

这样就能在全局周围下用Less了。

三、 Less基础语法

Less给了许许多CSS不具备的功能，如变量、函数、运算、层级嵌套、混合、插值等，从而 了CSS的能力。

.bordered {
  border: 1px solid #000;
}
#header {
  .bordered;
}

在上述代码中， 我们定义了一个.bordered混合，然后在#header中用这玩意儿混合来设置边框。

四、 Less与HTML的结合

如果你想通过CDN的方式引入Less，能在HTML中添加以下代码：

需要注意的是需要在Less文件上面添加标签，并且type非...不可设置为stylesheet/less。一边需要引入Less.js文件，否则Less无法正常运行。

五、Less的优势

用Less能搞优良代码的可维护性。通过变量、嵌套、混合等方式，能使得代码更加清晰，容易于搞懂和维护。

#wrapper {
  width: 960px;
  margin: auto;
  .header {
    background-color: #333;
    color: #fff;
    h1 {
      font-size: 24px;
    }
  }
  .content {
    padding: 10px;
  }
}

Less作为一款优秀的CSS预处理器，为前端开发者给了许许多便利。Less的魅力吧！