Bootstrap--less

Less 是一个 CSS 预处理器，不能在浏览器编译，需要借助less.js进行编译

一、变量

1. 定义变量—分为全局变量和局部变量

@width:100px;
@height:100px;
@backGround:green;
@borderColor:blue;

2. 变量的运用

.box{
    width: @width;
    height:@height;
    background: @backGround;
}

3. 变量的运算—注意运算符需要与变量名间隔开写

数值运算
.block{
    width: @width * 2;    
    height:@height * 2;
    border:1px solid @borderColor;
}

颜色的运算---两种颜色的rgb值相加，超过255以255处理

```css
.block{
    width: @width + @base;
    height:@height +  @base;
    background: @backGround + #ff86c1;
}

二、混合（mixnis）

混合是一种将一组属性从一个规则集中包含到另一个规则集中的方法

.item{
    .box();   //将 .box 类的样式添加给 .item
}

混合传参

.borderRadius(@radius){    
    border-radius:@radius;
}
.item{
    .box();
    .borderRadius(50%);
}

当方法有默认值时，调用时不用传参

.borderRadius(@radius:50%){   //方法有默认值：50%
    border-radius:@radius;
}
.item{
    .box();
    .borderRadius();   //不传参，使用默认值
}

三、嵌套
less中选择器与css中一致

<ul class="ulmenu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

.ulmenu{
    padding:0;
    li{     //li的样式直接嵌套在其父元素下
        display: inline-block;
        width:100px;
    }
}

利用嵌套和伪类选择器实现一个简单动画
—鼠标悬停每个li时，li添加一个下边框线（边框线从中间向两边展开）

.ulmenu{
    padding:0;
    li{
        position:relative;
        text-align: center;
        display: inline-block;
        width:100px;
        &:hover{
            cursor: pointer;
            color:red;
        }
        &:after{
            content: "";
            width:0;
            height:0;
            position:absolute;
            left:50%;
            bottom:0;
            border-bottom: 2px solid #ff51e3;
            transition: all .5s ease-in-out;
        }
        &:hover::after{
            width:100px;
            left:0;
        }
    }
}

嵌套使用媒体查询

.media{
    height:50px;
    margin:auto;
    border:1px solid #000;
    @media(min-width:768px){
        width:760px;
    }
    @media(min-width:996px){
        width:970px;
    }
    @media(min-width:1280px){
        width:1200px;
    }
}

以上也可以用转义字符“~”和自变量实现
转义符可以将将任意字符串用作属性或变量值使用

/*转义字符串*/
@minmedia:~"(min-width:768px)";
@mdmedia:~"(min-width:996px)";
@maxmedia:~"(min-width:1280px)";
.media{
    height:50px;
    margin:auto;
    border:1px solid #000;
     @media @minmedia{
        width:760px;
    }
    @media @mdmedia{
        width:970px;
    }
    @media @maxmedia{
        width:1200px;
    }
}

从Less 3.5开始，可以不用写转移符，直接简写为

@minmedia: (min-width:768px);

四、less内置函数

1. iscolor()----检测是否为一个颜色 返回true false

@name: #ddb4ab;
.fun{
    width:100px;
    height:100px;
    background: if(iscolor(@name),@name,#000);  //如果name是颜色，背景即为该颜色，不是颜色，背景为黑色
}

2. length(）返回列表中的元素数
3. range(start,end,step) 产生从start到end,间隔为step的数据
4. each(“遍历的数据”,“操作数据”)遍历数据

<ul>
    <li class="blue">蓝色</li>
    <li class="green">绿色</li>
    <li class="pink">粉色</li>
</ul>

@color:blue,green,pink;
each(@color,{
   .@{value}{    //给@color中的每个数据对应的类添加样式
       color:@value;
    }
})

实现效果

range()与each()的综合应用

<div>
    <div class="row-1">1</div>
    <div class="row-2">2</div>
    <div class="row-3">3</div>
    <div class="row-4">4</div>
</div>

@num:range(1,4,1);
each(@num,{
   .row-@{value}{
       width:@value * 20px;
       height:@value * 20px;
       border:1px solid #000;
   }
})

each遍历的数据也可以写成多个键值对的形式

<div>
    <div class="row-one">1</div>
    <div class="row-two">2</div>
    <div class="row-three">3</div>
    <div class="row-four">4</div>
</div>

@divcolor:{
  one:red;
  two:blue;
  three:green;
  four:pink;
}
each(@divcolor,{
   .row-@{key}{    //key为键 one/two/three/four
       width:@index * 20px;   //index 为索引1 2 3 4
       height:@index * 20px;
       background: @value;   //value为red/blue/green/pink
   }
})

实现效果

五、数学函数

1.percentage  转化百分比
2.min  取最小值
3.max  取最大值
4.isnumber 检测是否是数字的方法  返回值是true  false
5.isstring 检测是否是字符串的  返回值true false
6.isurl  检测是否是路径   true  flase
7.ispixel  检测像素值的  true  false
8.isem   检测是否是em 单位的 true false
9.ispercentage  检测是否是%单位的  true false

六、颜色函数

lighten(颜色，百分比)---减轻颜色的亮度
darken(颜色，百分比)---加重颜色的亮度
fadein(颜色，百分比)---降低颜色的透明度，变得更不透明
fade(颜色，百分比)---设置不透明度
mix(颜色1，颜色2，两种颜色之间的百分比平衡点[默认50%])---混合颜色的方法
tint(颜色1，颜色1与白色之间的百分比平衡点[默认50%])---把颜色和白色混合
shade(颜色1，颜色1与黑色之间的百分比平衡点[默认50%])---把颜色和黑色混合
multiply(颜色1,颜色2)---两种颜色中每种颜色的对应RGB通道相乘然后除以255,结果是颜色更深
screen(颜色1,颜色2)---与multiply相反，结果是颜色更亮

七、命名空间与访问符

命名空间是将一些混合（mixins）和变量封装起来，以便重用或分发
还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用

<button>按钮</button>

/*定义一个命名空间*/
#space(){
    primary:blue;   /*属性*/
    second:red;     /*属性*/
    .btn{
       width:100px;
        height:30px;
    }
}

button{
   #space.btn();    //调用 .btn 类
   background: #space[second];  //使用命名空间定义的变量
}