给CSS加点料——Less（s）
Hello 小伙伴们大家好，今天我们继续less的分享，上次说啥来着？大声说出来！变量！嵌套！今天说点啥？今天说运算、函数和混合。虽然上次我们已经用到了运算，这次就详细说一下咯！对了，这里说明一下，上次的代码在客户端引入css文件主要是为了为大家展示一下通过npm环境进行less编译的过程（生产环境也有很多就是这样用的），如果直接在客户端引入less文件也可以通过以下方式来引入：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>ps.: Less文件在js之前引入哦，这样才能确保正确编译呢！
但是不推荐这样引入啦，在生产环境中还是通过引入编译好的CSS文件更好呢！好了，下面就要开始我们今天的内容了。
♚
运算
其实上次的分享已经应用了简单的运算，在less中我们可以进行+、-、*、/等操作。这里就不给大家进行实例演示了。这里要提一下的是excape()（～）: 这允许了我们定义非属性或函数的值，比如我们要进行移动端适配，适配不同大小的屏幕，我们就可以这样进行适配了：
@min768: ~"(min-width: 768px)";
.container {
@media @min768 {
font-size: 1.2rem;
}
}转化为css文件就是这样子的了，是不是很方便呢？
@media (min-width: 768px) {
.container {
font-size: 1.2rem;
}
}♚
函数
说完了运算，我们就来说一下函数，首先在less中内置了很多函数，用于转换颜色、处理字符串、算术运算等，具体信息我们就不一一介绍了，我们来介绍一下函数的用法。
先把less的函数手册网址附上：https://less.bootcss.com/functions/，小伙伴可以在这里查看内置函数咯。
下面我们来看看怎么调用：
@width: 0.5;
@base: #f04615;
.container{
width: percentage(@width);
border: 1px solid pink;
border-radius: 5px;
.item1{
color: saturate(@base, 5%);
}
}这样子我们就调用成功啦，来看看编译后的代码是什么样的：
container {
width: 50%;
border: 1px solid pink;
border-radius: 5px;
}
.container .item1 {
color: #f6430f;
}我们可以看到编译出来的代码中，颜色的号不一样了，这是因为在上面的函数中，饱和度被增加了5%，宽度也变成了百分比的形式。
知道了内置函数怎么调用，自己编写的函数怎么调用呢？小伙伴们不用着急，且等兔妞介绍完Mixins。
♚
混合
说来咱就来啊，混合Mixins是一组CSS属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。简单来说就是，我们可以通过引入一个定义好样式的元素来引入该样式中的所有样式，这样更有利于样式统一，也减少了很大的工作量。我们先来看一个基本的Mixins：
.container{
border: 1px solid pink;
border-radius: 5px;
.item1{
color: pink;
}
.item2{
text-decoration: pink;
.item1();
}
.item3{
background: yellow;
.item1;
}
}
通过例子可见，元素后面的()是可选的～下面我们在看一个更繁琐一点的Mixins例子，我们可以将Mixins与变量相结合，就像定义一个js函数一样，Mixins可以具有参数：
.item1(@color, @background){
color: @color;
background: @background;
}
.container{
border: 1px solid pink;
border-radius: 5px;
.item1(yellow,pink);
.item2{
text-decoration: pink;
.item1(yellow,pink);
}
.item3{
.item1(blue, orange);
}
}
下面就来了Mixins函数，这就允许我们自己定义函数了。由变量和混合组成的混合可以在调用者的作用域中使用，并且是可见的。 但是有一个例外，如果调用者包含具有相同名称的变量，那么该变量不会复制到调用者的作用域中（兔妞理解：就像全局定义了一个js变量，在小的作用域内定义了一个名字相同的变量，变量会被覆盖一样）。 只有调用者范围内的变量被保护，并且继承的变量将被覆盖。同js函数一样，变量也是有作用域的，我们可以定义在全局，也可以定义在某个区域中。下面我们就来定义一个函数吧～
#item1() {
.btn {
display: block;
border: 1px solid #ccc;
background-color: dodgerblue;
&:hover {
background-color: white;
}
}
.span1 {
color: #f6430f;
}
}这就定义好了一个函数，当我们后面用的时候就可以调用了，也是层级调用的。看一看哦：
#btn2 a {
color: pink;
#item1.btn();
}酱紫我们就成功调用了，看看解析成什么样了吧～
#btn2 a {
color: pink;
display: block;
border: 1px solid #ccc;
background-color: dodgerblue;
}
#btn2 a:hover {
background-color: white;
}好啦，今天的分享就到这里啦，喜欢兔妞文章的小伙伴请在看+关注哦，也可以来和兔妞互动哟～
腾讯云开发者
