less语法

less简介

less是一个css预处理器,less文件后缀是 .less

好处：扩充了CSS语义，使CSS具备一定的逻辑性、计算能力。

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

 

编译插件： 

　　Easy Less:

　　vscode插件

　　作用：less文件保存自动生成css文件

Less注释

　　单行注释

语法：//注释内容
快捷键：ctrl+/

单行注释只能存在Less里

　　块注释

语法：/*注释内容*/
快捷键：shift+alt+a

块级注释保存后会生成到css里

Less运算：

　　加、减、乘之间书写计算表达式

.box{
     width:100 + 50 px;
     height:6 * 6px;    
 
}

 

　　除法需要添加小括号或.

　　现在是4.0的写法

.box{
     width:(100 / 5 px);
     height: 100 ./ 5px;   
}

 

 之前的写法 就是 

.box{
   
     height: 100 / 5px;   
}

 

后代选择器

　　作用：快速生成后代选择器

　　语法：

　　

.父级选择器{
    //父级样式

    .子级选择器{
        //子级样式
  
    }  
    
}

 

 

 

 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或者伪元素使用

 

Less变量：

　　方法：把属性提前存储到一个容器，设置属性值为这个容器名

　　变量：存储数据，方便使用和修改。

　　语法：

定义变量：@变量名：值；
使用变量：CSS属性：@变量名；

 

Less文件导入

　　写法：@import “文件路径”；

 

 

Less文件导出

　　

 

　　　　　　

 

 上面是全部导出到统一的文件夹里

 

如果想某个Less  导入到指定的文件夹中  在Less中第一行这样写

// out： ./abc/   
// out: ./bbb/自定义文件名.css  

 

 Less禁止导出

// out:false