LESS CSS –入门指南
它附带具有编程特性（例如变量，函数或Mixin和操作）的普通CSS，这些特性使Web开发人员可以构建模块化，可扩展且更易管理CSS样式 。
CSS预处理器现在已成为Web开发中的主要内容。
我们还将逐步介绍基本的实用程序，工具和设置，以帮助您入门和使用LESS 。
在这篇文章中，我们将研究LESS，LESS是周围最受欢迎CSS预处理器之一，并且已广泛部署在众多的前端框架（如Bootstrap）中。
编译器
尽管继承了类似于CSS的特征，但浏览器将无法处理和呈现输出。
根据W3C规范，LESS语法是非标准的。
首先，我们需要设置一个编译器。
以下是LESS代码：
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
.class2 {
background-color: #fff;
color: @color-base;
}
}
编译器将处理代码，并将LESS语法转换为与浏览器兼容CSS格式：
.class1 {
background-color: #2d5e8b;
}
.class1 .class2 {
background-color: #fff;
color: #2d5e8b;
}
有许多用于编译CSS的工具：
使用JavaScript
创建扩展名为.less的样式表，并使用rel="stylesheet/less"属性将其链接到文档中。
LESS带有一个less.js文件，该文件确实很容易部署在您的网站中。
<link rel="stylesheet/less" type="text/css" href="main.less" />
您可以在此处获得JS文件 ，通过Bower软件包管理器下载它，否则直接链接到CDN，如下所示：
<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
请记住， 在生产阶段不建议使用JavaScript ，因为它会严重影响网站的性能 。
LESS语法将在页面加载时即时编译。
您已经准备.less ，可以在.less组成样式。
您可以使用Terminal ，类似Grunt或Gulp的Task Runner或图形应用程序来执行此操作。
您应该始终事先编译LESS语法，而只提供常规CSS 。
使用CLI
该命令基于Node.js，可有效地使该命令在Windows，OS X和Linux上运行。
使用CLI，我们可以整理代码 ，压缩文件并创建源映射。
LESS提供了本机命令行界面（CLI） lessc ，它不仅可以编译LESS语法，还可以处理其他任务。
确保已安装Node.js（否则请在此处获取安装程序 ），然后使用以下命令行通过NPM （节点程序包管理器）安装LESS CLI 。
npm install -g less
现在，您可以使用lessc命令将LESS编译为CSS：
lessc style.less style.css使用任务运行器
我们可以设置安装一个任务运行程序，并将其设置为监视LESS文件中的更改，然后立即将LESS编译为CSS，而不是每次我们都希望编译代码时都运行lessc命令。
任务运行器是使开发任务和工作流自动化的工具。
检查您的帖子，以了解如何在工作流程中部署这些工具。
我们有一系列有关这些工具的文章。
使用图形应用
如今，所有平台上都有大量的应用程序可以编译LESS —有些是免费的，有些是付费的
对于那些可能不习惯使用终端和命令行的用户，他们可以选择图形界面。
以下是完整列表：
| 应用程式 | 平台 | 成本 |
| 混合物 | OS X / Windows | * |
| 考拉 | OS X / Windows / Linux | * |
| 专业人士 | OS X / Windows | 免费增值（USD29） |
| 温莱斯 | 视窗 | * |
| 代码包 | OS X | 32美元 |
坦率地说，您选择使用哪种编译器（除JavaScript之外）并不重要，只要该工具能够工作并能补充您的工作流程，那就去做吧。
代码编辑器
只需安装插件或扩展程序即可用适当的颜色突出显示LESS语法，该功能现在可用于几乎所有代码编辑器和IDE，包括SublimeText ， Notepad ++ ， VisualStudio ， TextMate和Eclipse等 。
您可以使用任何代码编辑器。
现在我们已经完成了编译器和代码编辑器的设置，接下来可以开始使用LESS语法编写CSS样式了。
LESS语法
它是动态的，因此希望在此过程中找到一些术语，例如Variables ， Operation和Scope 。
与我们所知道的常规CSS不同，LESS的工作方式更像是一种编程语言。
变数
首先，让我们看一下Variables 。
如果您使用CSS已经有一段时间了，那么您可能已经编写了这样的内容，其中在整个样式表的声明块中分配了重复的值。
.class1 {
background-color: #2d5e8b;
}
.class2 {
background-color: #fff;
color: #2d5e8b;
}
.class3 {
border: 1px solid #2d5e8b;
}
工作将变得乏味。
建立大型网站时可能会发生这种情况。
这种做法实际上很好–直到我们发现自己不得不筛选整个样式表中的一千或更多类似的片段 。
变量将允许我们存储一个常量值，以后可以在整个样式表中重复使用。
如果我们使用的是LESS之类CSS预处理器，那么上面的实例将不是问题-我们可以使用Variables 。
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
}
.class2 {
background-color: #fff;
color: @color-base;
}
.class3 {
border: 1px solid @color-base;
}
当您想要更改颜色时，我们只需要更改此变量中的值即可。
在上面的示例中，我们将颜色#2d5e8b存储在@color-base变量中。
除了颜色，您还可以在变量中添加其他值，例如：
@font-family: Georgia
@dot-border: dotted
@transition: linear
@opacity: 0.5混合蛋白
这是一个例子：
在LESS中，我们可以使用Mixins在另一个规则集中CSS规则集中重用整个声明。
.gradients {
background: #eaeaea;
background: linear-gradient(top, #eaeaea, #cccccc);
background: -o-linear-gradient(top, #eaeaea, #cccccc);
background: -ms-linear-gradient(top, #eaeaea, #cccccc);
background: -moz-linear-gradient(top, #eaeaea, #cccccc);
background: -webkit-linear-gradient(top, #eaeaea, #cccccc);
}
每当我们想要添加渐变时，我们只需以这种方式插入.gradients即可：
在以上代码段中，我们在.gradients类中预设了默认的渐变颜色。
div {
.gradients;
border: 1px solid #555;
border-radius: 3px;
}
因此，以上CSS规则等于以下普通CSS：
.box将继承.gradients内部的所有声明块。
div {
background: #eaeaea;
background: linear-gradient(top, #eaeaea, #cccccc);
background: -o-linear-gradient(top, #eaeaea, #cccccc);
background: -ms-linear-gradient(top, #eaeaea, #cccccc);
background: -moz-linear-gradient(top, #eaeaea, #cccccc);
background: -webkit-linear-gradient(top, #eaeaea, #cccccc);
border: 1px solid #555;
border-radius: 3px;
}
LESS Elements是常见CSS3 Mixins的集合，我们经常在样式表中使用它们，例如border-radius ， gradients ， drop-shadow等。
此外，如果您在网站上大量使用CSS3，则可以使用LESS Elements来简化您的工作。
要使用LESS Elements，只需在您的LESS样式表中添加@import规则，但不要忘记先下载它并将其添加到您的工作目录中。
@import "elements.less";
现在，我们可以重用elements.less提供的所有类 ，例如，向div添加3px边框半径，我们可以编写：
div {
.rounded(3px);
}
有关更多用法，请参阅官方文档 。
嵌套规则
当用纯CSS编写样式时，您可能还经历了这些典型的代码结构。
nav {
height: 40px;
width: 100%;
background: #455868;
border-bottom: 2px solid #283744;
}
nav li {
width: 600px;
height: 40px;
}
nav li a {
color: #fff;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
在普通CSS中，我们通过首先在每个规则集中定位父元素来选择子元素，如果遵循“最佳实践”原则 ，这将是多余的。
在LESS CSS中，我们可以通过将子元素嵌套在父元素中来简化规则集，如下所示；
nav {
height: 40px;
width: 100%;
background: #455868;
border-bottom: 2px solid #283744;
li {
width: 600px;
height: 40px;
a {
color: #fff;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
}
}
您还可以使用＆符号将伪类 （如:hover分配给选择器。
假设我们要将:hover添加到上面的anchor标签中，我们可以这样编写：
a {
color: #fff;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
&:hover {
background-color: #000;
color: #fff;
}
}运作方式
我们还可以在LESS中执行操作，例如对样式表中的数字，颜色和变量进行加，减，乘和除 。
假设我们希望元素B比元素A高两倍。在这种情况下，我们可以这样写：
@height: 100px
.element-A {
height: @height;
}
.element-B {
height: @height * 2;
}
如上所示，我们首先将值存储在@height变量中，然后将该值分配给元素A。
现在，只要我们更改@height变量中的值， 元素B的高度将始终是其两倍。
在元素B中， 我们可以使用星号运算符（*） 将高度乘以2 ，而不是自己计算高度。
在我们之前的教程中查看更多高级操作示例： 设计平滑菜单导航栏 。
范围
LESS应用了作用域概念，其中变量将首先从本地作用域继承，而当变量在本地不可用时，它将在更大的作用域中进行搜索。
header {
@color: black;
background-color: @color;
nav {
@color: blue;
background-color: @color;
a {
color: @color;
}
}
}
在上面的示例中， header具有黑色背景色，但是nav的背景色将为蓝色，因为它在其本地范围内具有@color变量，而a还将具有从其较近父级nav继承的蓝色。
最终思想
刚开始时您可能会觉得有些尴尬，但是随着尝试次数的增加，它肯定会变得容易得多。
最终，我们希望本文能使您对如何使用LESS以更好的方式编写CSS有一个基本的了解。
我鼓励您参考以下两个教程，以获取更多提示和实践，以帮助您将LESS技能提高到一个新的水平。
上一篇： centos静态IP配置