一、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>
三、常见用法示例
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;
}
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;
}
}
}
}
#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;
}
扫一扫
1034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
