快速入门less原理以及常用基本知识

less：

css的预处理器 使用less快速编译生产css代码，让css具备逻辑性，计算能力**

**
**浏览器不认识less 网页引入对应的css文件
开始之前请配置好 vscode插件 Easy Less （加个空格防止搜不到）**

1.less注释

/*多行注释才会被编辑到css显示注释*/
//单行注释不会编译到css里

2.less计算：

**上期讲了rem的适配计算公式 每次是手动计算的
这里使用less直接写：
举例：设计稿是375 那么设置html{font-size：37.5px} 假设元素大小是30px
那么 30/37.5就是计算出来的rem
less里面带有计算 直接写width:(30/37.5rem)**

**

less语法：xxx.less

.nox{
    width: 100+10px;
    width: 100-10px;
    width: 100*10px;
// 除法
// 方式1 less4.0支持
    width:(100/10px);
//方式2 less4.0支持
    width:100./10rem;
 //less4.0之前的写法现在不支持
    height:100/10rem; 
}

自动保存后编译的css xxx.css

.nox {
  width: 110px;
  width: 90px;
  width: 1000px;
  width: 10px;
  width: 10rem;
  height: 100/10rem;
}

3.less嵌套

.box{
    width: 100%;height: 20%;
    .son{
        width: 50%;height: 50%;
        &::before{ 
            background-color: green;
        } 
        &:hover{
            color: red;
        }
    } 
    &:hover{
        color: red;
    }
}

css编译后结果

.box {
  width: 100%;
  height: 20%;
}
.box .son {
  width: 50%;
  height: 50%;
}
.box .son::before {
  background-color: green;
}
.box .son:hover {
  color: red;
}
.box:hover {
  color: red;
}

4.less变量

@color:red;
.box{
    color:@color
}
.banner{
    background-color: @color;
}

css编译后结果

.box {
  color: red;
}
.banner {
  background-color: red;
}

5.less文件的导入

// css引入css文件  link
// less导入方式 @import 'base.less'  .less后缀可以省略
   @import './demo.less';

6.less每一个文件默认导出到一个位置（全局配置）

 /*  
 注意 此方式配置后是所新建的less文件默认导出在统一的文件夹 
 配置EastLess插件  所有less有相同的导出路径
  vscode左下角点击 设置 -->设置-->搜索EasyLess -->setting.json编辑  添加代码 
"less.compile": {
        //默认导出的文件夹地址
        "out":"../css/"
         
}*/

7.less自己的文件单独导出到某一个位置

注意out 之前加//

//想执行那个就把那个放在最上面

导出到commoncss.css的css代码里
// out: ./commoncss.css 
导出到css文件夹里
//out:./css文件夹/  

8.禁止导出

// out: false