LESS CSS预处理器入门-优快云博客

本文链接：https://blog.youkuaiyun.com/Rococoberry/article/details/105138376

一 Less简介

浏览器端使用less。less是css的扩展语言，css的预编译语言，就是CSS的提前状态。

在less使用的选择器和之前一样。

（1）声明变量：使用@来声明变量；
全局变量和局部变量
全局变量：在方法或者类的外面声明；局部变量：在方法或者类内部声明；
（2）变量的运算：在进行变量运算的时候，符号尽量用空格间隔开使用；
变量可以直接进行运算。颜色在运算的时候是按照对应的rgb位置进行运算，当大于255时，就等于255
变量在运算的时候会根据左侧的单位进行运算。
（3）2、mixins混合，方法的定义和方法调用。自定义一个属性的包，类似抽成的方法。
方法的传参，定义方法传参。方法传参默认值：
这种在使用的时候必须传值：

.borderRadius(@radius) {
  border-radius: @radius;
}

使用方法，可以不传参数，因为有默认值

.borderRadius(@radius: 10px){
  border-radius: @radius;
}

（4）less里面的嵌套规则：让CSS更好编译和维护。
这种嵌套规则写法，编译完之后是CSS的子父空格式写法。
&：代表当前元素；

.menu{
  padding-left: 0;
  li{
    position: relative;
    list-style: none;
    display: inline-block;
    width: 100px;
    text-align: center;
    line-height: 30px;

    //使用悬停
    &:hover{
      color: green;
      cursor: pointer;
    }

    //使用伪类  :after 、:before
    &:after{
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      bottom: 0;
      left:50%;
      border-bottom: 2px solid #ff51e3;
      transition: all .5s linear;
    }
    //after的动画
    &:hover::after{
      width: 100px;
      left: 0;
    }
  }
}

（5）嵌套规则里面的冒泡使用：媒体查询

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

（6）less里面的转义：~，将任意字符串作为属性或者变量输出。

@min768:~"(min-width:768px)";
@min996:~"(min-width: 996px)";
@bgcolormedia: ~"red";
.sc{
  margin: auto;
  width: auto;
  height: 50px;
  border: 1px solid orange;
  @media @min768 {
    width: 760px;
    background-color: @bgcolormedia;
  }
  @media @min996 {
    width: 970px;
    background-color: @bgcolormedia;
  }
}