less学习

1、使用less

1.1 普通使用less

// 全局安装less  -g 参数表示将 lessc 命令安装到全局环境。
npm install less -g  
// 针对 Node Development 配置段安装 Less  
// 这将在项目文件夹中安装 lessc 的最新正式版本，
// 并将其添加到 package.json 文件中的 devDependencies 配置段中。
npm i less --save-dev 


// 把less语言编译成css语言，浏览器只识别css语言，需要使用node来编译成css语言
lessc 文件名.less > 文件名.css

1.2 在vue中使用less

在vue-cli 框架中选中使用less，这样在就可以在.vue文件中的style中通过lang="less"属性指定使用less语言。

2、less中的注释

// 这种注释不会被编译到css中

/* 这种注释会被编译到css中 */

3、变量

在less中定义变量是使用：@变量名: 值 的方式创建变量。

// 定义变量
@color: orange;
@btnColor: rgb(163, 234, 56);
@bgColor: skyblue;

#app {
  background-color: @bgColor;
}
.btn1 {
  color: @color;
  background-color: @btnColor;
}

其中变量的值可以为一个对象，这个就可以提取出一些元素的公共样式，后面只需要 @变量名() 来进行使用就可以应用公共的样式。

// 其中变量的值可以为一个对象,这样就可以使多个元素使用相同的一些样式
@btn: {
  width: 100px;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border: 0;
  outline: 0;
}
.btn2 {
  // 使用公共样式变量
  @btn();
  // 定义单独的样式
  background-color: green;
}

可以使用变量来处理一些需要重复书写的文字，使用变量的格式为： @{变量名}

// 还可以使用变量来处理一些要重复书写的字符串
@img: './assets/images/';
.image {
  width: 150px;
  height: 150px;
  background-image: url("@{img}cutcamera.png");
}

可以使用变量来进行 加 、减、乘、除 的运算，其中单位是看左边

// less 可以进行加、减、乘、除 的运算。
.div1 {
  // 注：运算的单位以左边的单位
  width: 150px + 10; // 160px
  height: 15px * 10; // 150px
  background: yellow;
}

4、嵌套

在less中可以嵌套书写元素，这个样可以避免书写重复的元素名。

注：

1. 在less中的元素内定义的变量为私有变量，只能在当前元素内有效。

2. 在less中如果要访问父元素可以使用 & 符号。

// 定义一个变量,使用这个变量的格式为：@变量名()
@btnStyle: {
  width: 250px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 0px;
  outline: 0px;
  color: #fff;
  border-radius: 10px;
  background-color: skyblue;
}
// less 中的嵌套
a {
  // 定义在这个元素中的私有变量
  @hoverColor: orange;
  // 转换为行内块元素
  display: inline-block;
  // 设置相对定位
  position: relative;
  // 使用变量
  @btnStyle();
  // 嵌套元素
  h1 {
    margin: 0;
  }
  // 使用 & 符号表示父级元素，即当前的 a 元素
  &:hover {
    background-color: @hoverColor;
  }
  // 使用伪元素 创建一个三角形
  &::after {
    content: "";
    position: absolute;
    top: 15px;
    right: -20px;
    display:inline-block;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent skyblue;
  }
  // 当放在a标签上时，这个三角颜色也变
  &:hover::after {
    border-left-color: @hoverColor;
  }
}

在嵌套中使用媒体查询，不同于原css.

/* 原css的媒体查询 */
@media (min-width: 1000px) {
   /* 当宽度大于1000时 */
   a {
        color: #000;
    }
}
@media (min-width: 700px) and (max-width: 1000px) {
    /* 当宽度大于700小于1000时 */
     a {
        color: #999;
    }
}

// less 中的嵌套
a {
  // 定义在这个元素中的私有变量
  @hoverColor: orange;
  // 转换为行内块元素
  display: inline-block;
  // 设置相对定位
  position: relative;
  // 使用变量
  @btnStyle();
  // 嵌套元素
  h1 {
    margin: 0;
  }
  // 使用 & 符号表示父级元素，即当前的 a 元素
  &:hover {
    background-color: @hoverColor;
  }
  // 使用伪元素 创建一个三角形
  &::after {
    content: "";
    position: absolute;
    top: 15px;
    right: -20px;
    display:inline-block;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent skyblue;
  }
  // 当放在a标签上时，这个三角颜色也变
  &:hover::after {
    border-left-color: @hoverColor;
  }
  // 在元素内使用媒体查询
  @media (min-width: 1000px) {
    // 当宽度大于1000时
    color: #000;
  }
  @media (min-width: 700px) and (max-width: 1000px) {
    // 当宽度大于700并且宽度小于1000时
    color: #999;
  }
}

5、函数

1. 可以直接调用写好的选择器中的样式，相当于复制。

   .card {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: yellow;
   }
   .myCard {
    .card; // 可以直接调用，相当于复制
   }  
   
   // 或者写法可以为
   .card {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: yellow;
   }
   .myCard {
    .card(); // 可以直接调用，相当于复制
   }
   

2. 定义无参的函数

   // 定义函数
   .card() {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: yellow;
   }
   .myCard {
    .card; // 调用函数
   }  
   
   // 或者写法可以为
   // 定义函数
   .card() {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: yellow;
   }
   .myCard {
    .card(); // 调用函数
   }
   

3. 定义有参的函数，并且含有默认值

   // 定义函数,并且设置参数，参数也可以设置默认值
   .card(@color: yellow) {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: @color;
   }
   .myCard {
    .card(); // 调用函数,不传入参数
   }  
   
   // 传入参数
   // 定义函数,并且设置参数，参数也可以设置默认值
   .card(@color: yellow) {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: @color;
   }
   .myCard {
    .card(red); // 调用函数,传入参数
   }
   

4. 定义选择器函数，实现根据需求实现不同方向的三角形。

   // 选择函数  使用选择函数来创建不同方向的三角形
   .triangle(top, @width: 20px, @color: yellow) {
    border-color: transparent transparent @color transparent;
   }
   .triangle(right, @width: 20px, @color: yellow) {
    border-color: transparent transparent transparent @color;
   }
   .triangle(bottom, @width: 20px, @color: yellow) {
    border-color: @color transparent transparent transparent;
   }
   .triangle(left, @width: 20px, @color: yellow) {
    border-color: transparent @color transparent transparent;
   }
   .triangle(@_, @width: 20px, @color: yellow) {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: @width;
   }
   .left-triangle {
    .triangle(left, 40px);
   }
   

6、命名空间

1. 函数的嵌套和使用。使用嵌套函数需要写出父级函数中间用 > 分隔。

   注意：如果嵌套的父级元素有参数但没默认值，会报错。 并且调用的函数自会执行当前函数内的内容，不会执行父函数或子函数的内容。

   // 函数的嵌套
   .box() { // 定义了一个 .box() 函数
    color: orange;
    // 嵌套一个函数
    #w() {
      width: 100px;
      // 嵌套函数 
      .h(@height: 20px) {
        height: @height;
      }
    }
   }
   // 使用嵌套中的函数
   .box-height {
    .box > #w > .h(80px);
   }  
   

2. 命名空间就类似于函数的嵌套。

   // 命名空间
   #div() {
     .bg(@color) {
       background-color: @color;
     }
   }
   .div-bg {
     width: 50px;
     height: 50px;
     // 调用命名空间中的函数
     #div > .bg(yellow);
   }
   

7、逻辑处理 and not ,

1. and 与逻辑

   // less 中的逻辑处理
   #div() {
    .lessAnd(@width, @height) when (@width > 50px) and (@height > 50px) {
      width: @width;
      height: @height;
      background-color: skyblue;
    }
   }
   // and 实现与逻辑
   .less-and {
    // 调用命名空间中的与逻辑函数
    #div > .lessAnd(80px, 80px);
   }
   

2. not 非逻辑

   // less 中的逻辑处理
   #div() {
    .lessNot(@font) when not (@font >= 24px) {
      font-size: @font;
    }
   }
   // not 实现非逻辑
   .less-not {
    #div > .lessNot(28px);
   }
   

3. , 或运算

   // less 中的逻辑处理
   #div() {
   .lessOr(@width, @height) when (@width < 10px) , (@height > 50px) {
      width: @width;
      height: @height;
      background-color: yellow;
    }
   } 
   // , 实现或逻辑
   .less-or {
    #div > .lessOr(40px, 40px);
   }
   

8、循环

// less 中的循环
#cycle-cols(4); // 定义一个函数，传入参数为4，表示要循环4次
// 循环函数
#cycle-cols(@n, @i: 1) when (@i <= @n) {
  .cycle-col-item-@{i} { // 循环创建类
    width: (@i * 100% / @n); // 动态处理
    height: 20px;
    background-color: skyblue;
  }
  // 改变函数的参数
  #cycle-cols(@n, @i + 1);
}

9、拼接

// less 拼接  使用 + 字符
.boxShadow() {
  box-shadow+: 1px 1px 4px yellow;
}
.box {
  width: 100px;
  height: 100px;
  .boxShadow();
  box-shadow+: 1px 1px 4px yellow;
}

10、继承 extend

使用继承的好处：可以减少代码的重复性，如果只是像变量和函数来创建，则会把指定的代码对当前的元素进行重写一边。若是使用继承，则会使用css中的并集选择器，把具有相同样式的元素并集起来，实现了代码的优化。

// less 拼接  使用 + 字符
.boxShadow() {
  box-shadow+: 1px 1px 4px yellow;
}
.box {
  width: 100px;
  height: 100px;
  .boxShadow();
  box-shadow+: 1px 1px 4px yellow;
}
// less 继承 使用关键字 extend
.box2:extend(.box){}