CSS系列——前端进阶之路：初涉Less
阅读目录
正文
前言：最近帮一个朋友解决点问题，在查看组件源码的时候涉及到了 less 语法，这可难倒博主了。没办法，既然用到就要学呗，谁让咱是无所不能的程序猿呢！所以今天来学习下Less，算是笔记，也希望给初学 less 的园友提供参考，如果你是前端大神，此文就没必要看了哈。算了，扯远了哈，进入正题。
本文原创地址：http://www.cnblogs.com/landeanfen/p/6047031.html
一、Less 介绍
1、官方介绍
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
2、自己理解
Less 是一门动态 CSS 语言，使得 CSS 样式更加灵活地作用于 Html 标签。试想如果没有 Less，我们要对样式做一些逻辑计算的时候只能依靠 Js 去实现，有了 Less 之后，可以方便地动态给 Html 标签设置样式。比如一个最常见的需求，在当前浏览器的宽度小于 500px 的时候，给某一个 div 设置一个样式，使用 less+css3 就能很简单的解决问题。当然，这只是其中一个场景，less 里面还能进行一些常见的条件和逻辑判断。总的来说，Less 赋予了 CSS 逻辑运算的能力。
除此之外，动态 CSS 语法还有一个重要的作用就是提高样式代码的可维护性。比如一个最简单的，我们可以定义一个全局的颜色变量 @aaa:#222，系统里面所有的默认颜色用的 @aaa 来写的，这个时候如果需要修改这个全局颜色，我们只需要改下 @aaa 变量的值就好了，其他地方不用做任何修改，这点，作为编程人员应该很容易理解。
说一千道一万，实践才是王道，下面跟着博主一起来看看一些 Less 最基础的用法吧。
3、Less、Sass、Stylus
说到 Less，可能又有人不服了，可能有人要说：Less 过时了，Sass 是趋势，你看 bootstrap3 用的是 less，怎么 bootstrap4 就改用 sass 了等等。博主想，它们三者作为 Css 的预处理技术，肯定都有自己的优势吧。今天在这里不想讨论三者的优缺点，先来学习 Less 吧，想那么多干嘛！
二、Less 使用入门
关于 Less 的入门教程，网上也是一搜一大把，基本都和Less 中文网上面差不多。Less 既可以运行在 Node 服务端，也可以运行在浏览器客户端。博主对 Node 不熟，所以这篇还是看看其在浏览器端的使用，其实没有关系，不管在哪里使用，其基础的用法都是一样的。
一般来说，客户端运行 Less 分为两种情况：
- 第一种方式是直接在 html 页面引用.less 文件，然后借助 less.js 去编译 less 文件动态生成 css 样式而存在于当前页面，这种方式适用于开发模式。
- 第二种方式是我们首先写好.less 文件的语法，然后借助工具生成对应的.css 文件，然后客户端直接引用.css 文件即可。比如我们常用的 bootstrap.css 就是通过工具编译而成，这种方式更适合运行环境。
1、开发模式下使用 Less
（1）首先我们在项目下面新建一个 less 文件，命名为less.less，里面写入最简单的语法
@base: #f938ab;
div{
background-color:@base;
padding:50px;
}
（2）然后在 html 页面 head 里面引用该 less 文件
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
（3）去 less 开源地址 下载 less.js 文件，然后引入该文件。
<script src="less.js" type="text/javascript"></script>
或者你如果不想去下载 less.js 文件，也可以直接使用 CDN 的方式引用 less.js，博主就是这么做的。
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
需要说明的是，less.js 的作用就是编译 less.less 文件，使它成为浏览器能读懂的 css 样式。
（4）在引用 less.js 之前，需要一个 less 变量，声明编译 less 的环境参数，所以最终所有引用文件如下：
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" /> <script type="text/javascript"> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
这里要强调的是，less 变量的声明必须要在 less.js 的引用之前。
（5）调试运行
我们直接运行项目，得到如下结果
如果你的调试环境不是 Visual Studio，就不会有这个问题！对于上述问题，需要在 web.config 里面配置如下节点
<system.webServer> <staticContent> <mimeMap fileExtension=".less" mimeType="text/css" /> </staticContent > </system.webServer>
然后再次运行，可以看到编译生成的 css 如下
2、运行模式下使用 Less
如果是运行环境，最好是将 less.less 编译成.css 文件，然后直接引用生成的.css 文件即可，博主不熟悉 Node 的环境，这里，博主介绍一款 less 生成 css 的工具：Koala。首先去官网下载安装文件，安装运行之后得到如下界面：
然后将 less 所在的目录拖到界面中间
点击 Compile 按钮。将会在 less.less 的同级目录下生成一个 less.css 文件
然后直接引用这个 css 文件即可。有了工具是不是很 easy~~
三、常见用法示例
初初入门，我们还是从最基础的开始吧！
1、从第一个 Less 变量开始
@base: #f938ab;
div{
background-color:@base;
padding:50px;
}
页面 html 代码：
<body> <div> 第一个 Less 样式 </div> </body>
编译之后的 Css 样式如下：
效果预览：
以上是一个最基础的 Less 变量，在.less 文件里面定义一个全局的 @base 变量，那么在该文件里面所有地方均可调用。
需要说明的是（1）Less 里面的变量都是以 @作为变量的起始标识，变量名由字母、数字、_ 和 - 组成；（2）在一个文件里面定义的同名变量存在全局变量和局部变量的区别（后面介绍）；
2、变量计算
@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;
div {
background-color: @light-blue;
}
编译得到结果：
div { background-color: #ff6bde; }
这说明，在 Less 里面，变量可以动态计算。
3、变量混合
混合可以将一个定义好的 class A 轻松的引入到另一个 class B 中，从而简单实现 class B 继承 class A 中的所有属性。我们还可以带参数地调用，就像使用函数一样。我们来看下面的例子：
.rounded-corners (@radius: 15px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }#div1 {
padding:20px;
width:200px;
height:100px;
border:2px solid red;
.rounded-corners;
}
#div2 {
padding:20px;
width:200px;
height:100px;
border:2px solid green;
.rounded-corners(30px);
}
编译后的结果你是否猜到了呢：
#div1 { padding: 20px; width: 200px; height: 100px; border: 2px solid red; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; } #div2 { padding: 20px; width: 200px; height: 100px; border: 2px solid green; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; }
原理解析：最上面的 @radius 变量可以理解为一个方法的参数，然后“15px”可以理解为参数的默认值。首先我们定义一个动态样式 .rounded-corners ，这个样式有一个动态的参数 @radius ，这个参数的默认值是“15px”。我们调用的时候如果不传参数，那么 @radius 就等于 15px，如果我们传了 30px，那么 @radius 就是我们传的参数值。如果这样理解是否会好一点呢，是不是有点类似我们编程里面的“方法”的概念。如果按照面向对象的原理也很好理解，#div1 和 #div2 继承.rounded-corners 这个样式，所以可以直接使用，然后如果“子类”(#div2) 有不同于“父类”的属性，可以“重写”，是不是一样一样的。
既然做了测试，我们还是来看看测试结果：
<div id="div1">div1</div> <div id="div2">div2</div>
4、嵌套规则
在 CSS 里面，我们也经常可以见到标签样式嵌套的写法，那么在 Less 里面它是怎么实现的呢？我们来下下面的 Less 代码
#div1 { h1 { font-size: 26px; font-weight: bold; } span { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } } }
编译后的 CSS：
#div1 h1 { font-size: 26px; font-weight: bold; } #div1 span { font-size: 12px; } #div1 span a { text-decoration: none; } #div1 span a:hover { border-width: 1px; }
Less 的这种写法好处是显而易见，标签层级结构清晰可见，并且能减少 css 代码量。但博主猜想肯定有人会不习惯这种写法，就是因为这种结构层级深，所以在阅读上面还是会有人不习惯，不管怎么样，且用且珍惜吧。
5、函数的使用
在 Less 里面函数的概念还是比较容易理解的。比如我们有这么一段定义：
.mixin (dark, @color) { color: darken(@color, 10%); } .mixin (light, @color) { color: lighten(@color, 10%); } .mixin (@_, @color) { display: block; }
然后有这么一句调用
@switch: light;
.class {
.mixin(@switch, #888);
}
编译得到
.class { color: #a2a2a2; display: block; }
以上不难理解，就是一个简单的逻辑判断。
6、条件判断
在上述“函数的使用”里面，我们看到 Less 支持“等于”的匹配方式，除此之外，Less 里面还支持大于、小于等条件判断的语法，此之所谓“导引混合”。先来看看它的语法：
首先定义几个条件判断的“方法”
.mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; }
然后调用该“方法”
.class1 { .mixin(#ddd) } .class2 { .mixin(#555) }
你猜结果是什么？编译结果如下：
.class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; }
原理解析：不知道你有没有猜对结果，反正最开始博主是猜错了的。when 的语法不难理解，就是一个条件判断，关键是下面的 color 从哪里来的。原来在 Less 里面是一种混合调用的方式，也就是说，如果定义了三个函数 mixin，分别对应有三个不同的条件，那么我们调用 mixin 函数的时候如果三个的条件都满足，那么它三个的结果都会得到。这就是为什么我们 class1 和 class2 得到如上结果。在 Less 里面所有的运算符有： >、 >=、 =、 =<、 <，除了这5个运算符，Less还提供了基于值类型进行判断的方法：iscolor()、isnumber()、isstring()、iskeyword()、isurl()等。用法如下：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... } .mixin (@a, @b: black) when (iscolor(@b)) { ... }
除了上述条件表达式以外，Less 还提供了 and、not 等逻辑表达式。基础用法如：
.mixin (@b) when not (@b > 0) { background-color:blue; }
7、变量作用域
Less 的作用域很好理解，就是我们常说的全局变量和局部变量的区别，记住 Less 里面变量名可以重复。
@aaa: red;
#div1 {
@aaa: green;
#header {
color: @aaa;
}
}
#div2 {
color: @aaa;
}
相信你已经猜到结果了吧。编译之后
#div1 #header { color: green; } #div2 { color: red; }
8、不得不说的 import 指令
less 里面使用 import 将外部的 less 引入到本地 less 文件里面来。比如 A.less 里面定义了一个变量 @aaa:red，而 B.less 文件里面也需要使用 @aaa 这个变量，这个时候怎么办呢？import 派上用场了。
A.less 内容如下：
@aaa:red;
B.less 内容如下：
@import 'A.less';
div{
color:@aaa;
}
然后再 html 页面引入 B.less 文件，编译最终可以得到如下结果
div{ color:@aaa; }
有人可能要说，不就是引用其他 less 文件里面的变量吗，没啥用。可是你想过没有，由于项目里面模块很多，每个模块都有自己的 less 文件，如果没有 import，怎么去统一调度呢。这点从 bootstrap 就可以看出来，当我们下载 bootstrap3 的源码，你会发现有很多的 less 文件，放在 less 文件夹里面，这些 less 文件分别对应着各个模块的样式。形如
各个模块的样式写完后，会有一个 bootstrap.less 文件，将其他所有的 less 文件都 import 进来，其内容如下：
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";
// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";
// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";
然后我们编译 bootstrap.less，就能将所有模块的 less 文件引入进来。
为了证明这点，我们来测试一把，在 A.less 里面加入如下内容：
@aaa:red;
@widthtest:200px;
.class2{
background-color:green;
border:5px solid red;
}
B.less 内容如下：
@import 'A.less';
div{
color:@aaa;
width:@widthtest;
height:50px;
}
然后编译 B.less 得到的 B.css 文件内容如下：
.class2 { background-color: green; border: 5px solid red; } div { color: #ff0000; width: 200px; height: 50px; }
另外，import 指令还包含了多种参数类型：
1. @import (reference) "文件路径"; 将引入的文件作为样式库使用，因此文件中样式不会被直接编译为 css 样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
2. @import (inline) "文件路径"; 用于引入与 less 不兼容的 css 文件，通过 inline 配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。
3. @import (less) "文件路径"; 默认使用该配置项，表示引入的文件为 less 文件。
4. @import (css) "文件路径"; 表示当前操作为 CSS 中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件
5. @import (once) "文件路径"; 默认使用该配置项，表示对同一个资源仅引入一次。
6. @import (multiple) "文件路径"; 表示对同一资源可引入多次。
9、综合实例
对于上文提到的屏幕变化的时候动态去设置样式的问题，使用 less 结合 css3 的 @media 就能轻松处理，比如有下面一段 less 代码：
@base: #f938ab;
div{
background-color:@base;
padding:50px;
}
.divcolor {
@media (max-width: 400px) {
background-color: green;
}
@media (min-width: 400px) and (max-width: 800px) {
background-color: red;
}
@media (min-width: 800px) {
background-color: #f938ab;
}
}
界面 html 如下：
<body> <div id="div1" class="divcolor">div1</div> <div id="div2">div2</div> </body>
使用这种嵌套的写法就能实现多个条件的预设样式，所以最终编译得到的 css 如下：
/* line 4, http://localhost:34512/Content/less.less */ div { background-color: #f938ab; padding: 50px; } @media (max-width: 400px) { .divcolor { background-color: green; } } @media (min-width: 400px) and (max-width: 800px) { .divcolor { background-color: red; } } @media (min-width: 800px) { .divcolor { background-color: #f938ab; } }
表示当前文档的宽度小于 400 的时候，背景色为 green；大于 400 小于 800 时背景色为 red；大约 800 时背景色为 #f938ab。来看看是不是这样：
这里只是一个简单的测试，实际应用中肯定不可能只是设置一个简单的背景色。对于响应式布局的情况，这种写法非常多。
对于条件判断，less 支持嵌套的写法，比如：
@base: #f938ab;
div{
background-color:@base;
padding:50px;
}
.class1{
width:550px;
margin:10px;
}
.class2{
width:150px;
margin:auto;
display:block;
}
.divcolor {
@media (max-width: 800px) {
background-color: green;
.class1;
@media (min-width: 400px){
background-color: red;
.class2
}
}
}
编译得到的 css 如下：
div { background-color: #f938ab; padding: 50px; } .class1 { width: 550px; margin: 10px; } .class2 { width: 150px; margin: auto; display: block; } @media (max-width: 800px) { .divcolor { background-color: green; width: 550px; margin: 10px; } } @media (max-width: 800px) and (min-width: 400px) { .divcolor { background-color: red; width: 150px; margin: auto; display: block; } }
四、总结
一些基础的用法暂时先介绍这么多，更多高级用法还有待研究再发出。由于博主接触 less 语法的时间并不长，如果有理解有误之处，还望园友们指出。
如果你觉得本文能够帮助你，可以右边随意 打赏 博主，也可以 推荐 进行精神鼓励。你的支持是博主继续坚持的不懈动力。
本文原创出处：http://www.cnblogs.com/landeanfen/
欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利