Less学习笔记

less中注释:

• 以// 开头,不会被编译到CSS中
• 以/**/包裹的注释会被编译到CSS中

less中的变量:

• 使用@来声明变量：@zyjColor:#000
• Vue中使用全局变量(增加连接)

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color:@zyjColor;
  .son1{
     .son;
     background-color: darkblue ;
  }
  .son2{
      .son
  }

less嵌套规则:

• 基本嵌套规则：父子集关系
• &符号使用：使子与父在一个级别

 .father{
     width: 200px;
     height: 200px;
     background-color: brown;
     .son{
          background-color: brown;
      }
     &:hover{
         background-color: coral;
     }
 }

• 直接设置子的样式：

 .father > .son{} 或者 .father .son{} 

分析：father与son是父子关系。father与 hover是同级。

less中的混合：

有俩个布局里面样式一样，可以提出来一些，比如以下son，
而下面son带()代表.son不会编译css中

• 普通混合：共用的样式son不带()就是普通混合
• 不输出混合: 共用的样式son带()就是不输出混合
• 参数混合: 下面 .son(@w,@h)可以传递宽高，使用就是 .son(100px,100px)
• 带参带默认值混合：下面 .son(@w :100px,@h:100px) 可以给宽高度设置默认值100px，参数都要设置
• 带命名参数混合：下面 .son(@w :100px,@h:100px) 调用时候.son(@h:200px)，指定高度200px

.son(@w :100px,@h:100px){
      width: 200px;
      height: 200px;
      text-align: center;
      background-color: brown;
      &:hover{
          background-color: coral;
      }
}
// 使用
.fatext{
   .son(@h:200px)
}

• 匹配模式：
  1. 定义个混合

  .son(@w,@h){
     width: @w;
     height: @h;
  }
  

  2. 定义个匹配类只要带@的自动匹配调用

  .son(@_){
     background-color: darkblue ;
  }
  

  3. 所以以上就是匹配模式
     @arguments使用
     .son(@l,@s,@c){
     border:@arguments
     }
     @argumentsk可以直接接受参数不用写成 border:@l @s @c

less继承:

1. 定义父样式(不带括号，不能传参)

.father{
       width:100px;
       height:100px
  }
 继承
 .son:extend(.father){
     background-color:red
  }

Vue 样式继承：

1. 在项目中编写一个father.less文件
2. 在 vue的<style>中引入@import “../../styles/father.less”子样式就可以继承使用:.son:extend(.father){}