关于Less的学习小结

关于Less的学习小结

Less是什么？

• Less是一个CSS预处理器，文件后缀是.less
• 相当于一个中间工具，人使用less语法写相关的样式代码，less插件（Easy Less）将其翻译为浏览器可以识别的css代码
• less插件是把less格式文件转换为css文件（浏览器不能直接识别less）

为什么学less？

• Less扩充了CSS语言，使CSS具备一定的逻辑能力，计算能力
• 直观理解：为什么使用md语法记笔记而不使用word
• 逻辑能力如父类样式中可以直接嵌套子类样式，以及可以使用变量存储值
• 计算能力：移动端适配时经常使用，属性值可以使用表达式

怎么用Less？

• 需要在编辑器中安装相关插件；如vscode中的Easy Less

Less基础语法

注释

• 单行注释： // 注释行快捷键 CTRL + /

• 块级注释 ：与css注释语法相同，为/* */快捷键 shift + alt +A

  // 单行注释
  /*
  多行注释
  与css注释方式相同
  单行注释在转换css文件时也变成了此种注释方式
  单行注释和js注释方式一样
  */
  

运算

• 运算加、减、乘正常使用即可 ：
• 需要注意的是除法运算： 需要使用小括号或者 " ./ "

//2*100px 
//12+1px
//12-1px
width:(48 / 37.5rem);
width:48 ./ 37.5rem;
// ./方式在vscode中会出现波浪线警告，但可以正常使用

嵌套

• 嵌套，类似div盒子一样，不仅可以写自己的样式代码，还可以选中其子代进行样式代码书写
• 其中"&"代表本身选择器，一般与伪类、伪元素连用

.father{
    width:100%;
    height:(150 / 37.5rem);
    .son{
        height:80 ./ 37.5rem;
        &：hover{
            color:red;
        }
    }
    &::after{
        content:"";
        display：block;
        ...
    }
}

变量

• 定义方法：@变量名 ：值；
• 使用方法：css属性：@变量名；
• 注意使用时也需要加@

@fontsizeRoot:37.5rem;
.father{
height:(150 / @fontsizeRoot)}

引入方式

• 使用@import “文件路径”；
• less文件可以省略后缀名
• 注意**@import后加空格**
• 注意结尾要有分号 ;

@import "./base.less";
@import "./base";

导出相关

• 默认无配置状态下会在当前目录下生成对应文件名相同的css文件

• 可以在vscode中进行配置或者使用代码指定

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

,
    "less.compile": {
    
        "out":"../css/"
    }

• 如上表示在当前的上级目录的css文件夹下导出；

使用代码导出

• 注意是在首行
• 没有引号
• 结尾没有分号

//out: ../css/           表示在上级目录css文件夹下生成

//out: ../css/abc      导出文件名为abc

禁止导出

• 在首行

//out:false

less的注意点有哪些

• 需要安装插件才能自动生成css
• 引入时@import后要有空格，路径加引号，结尾加分号;
• 除法与其他运算符不同
• 导出首行注释时没有分号没有引号。
• 在json文件配置时有引号，且一定为双引号