01-less的基本使用

• 默认情况下，浏览器不能识别less，我们需要把less转成css

   转化方式一：
       1）html文件中引入 less.js 文件
       2）vscode的插件  Easy LESS
  

转化一：

转化二：

• 安装插件后，在less中编辑样式会自动生成一个css文件，直接在html里引入这个生成的scc文件即可

02-less中的注释

 多行注释  /* */   多行注释会编译成css，在自动生成的css文件中保留
 单行注释  //

• 多行注释可以调试

03-less中的变量

• 变量通过@来定义

  1，变量当成属性值来使用
    @v:200;
  
  2，变量当成属性名来使用
    想当成属性名使用，需要用{}包起来
    @c:background-color;
  
  3，变量当成选择器来使用
    想当成选择器使用，也需要用{}包起来
    @s:#box;
  
  4，变量记录图片的地址
    @imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12683920161%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661932022&t=8c097e50c8847d4bd10df1d100237622';
  
  5，把一个变量赋值给另一个变量
    把@imgUrl赋值给@imgUrl2
    @imgUrl2:@imgUrl;
  

• less中的变量是延迟加载的
• 需等待所在区域的代码全部加载完

04-less中的嵌套

• 嵌套：一个{ }包含了这个模块里所有的样式，如下：
• 在css中的样式如下：

05-父级引用

01-父级引用之选择器层级

• &表示父级引用

02-父级引用之伪类选择器

选中第一个li：li:nth-child(1)
摸第一个li：li:nth-child(1):hover

06-less中的计算

• 两个数值有一个加px就行
• 相除的话，需要用( )包起来、或者使用 “ . / ”

less中计算颜色

07-less中的混合

01-普通的混合

• 把宽高抽出来 然后用.s()调，还可以用.s
• 缺点：.s也输出了

02-不带输入的混合

• 加上( ) .s就不会输出了

03-带参数的混合

04-参数的默认值

08-less中的命名空间

09-less中的重载

重载是指：

• 混合名是一样的，传递的参数个数是不一样的
• 调用时，根据传递的实参个数决定使用哪一个混合