CSS进阶之预处理语言之less (二)：Easy less插件、认识less、注释、计算方式、嵌套、变量的定义导入less文件、从less导出css样式的路径

跳转目录🚀

篇章	知识点
CSS进阶之形变与动画 (一)	transform、垂直居中总结、transition动画、animation动画、vertical-align
CSS进阶之预处理语言之less (二)	Easy less插件、认识less、注释、计算方式、嵌套、变量的定义导入less文件、从less导出css样式的路径
CSS进阶之grid网格布局 (三)	关于grid布局、grid-container属性、grid-items属性
CSS进阶之移动端适配 (四)	媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案
CSS进阶之额外内容补充 (五)	HTML5新增、CSS函数补充、BFC详解

1. Easy less插件

1.1 easy less插件下载与配置

1. 第一步-安装：在vscode上安装插件
   

2. 配置：在 设置->扩展->Easy less configuration->打开设置(json)
   

3. 设置out：

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

1.2 为什么需要easy less

• 为什么需要easy less：
  • 在css写样式不像编写html时有明显的结构，我们有时候写着写着就不知道之前的样式在哪里了，因此我们需要使用less语法来编写样式，但是浏览器是不识别less代码的，我们最终引入页面的还是css文件，需要借助“Easy Less”插件翻译转化为css文件。

2. 认识less

• 什么是less？：less是一门css预处理语言
• less的特点 ： 扩展了css的动态特性；less扩充了css语言，使css具备一定的逻辑性、计算能力。
• 文件后缀名： .less

3. 使用less

• 思考： 关于后代选择器，我们使用 空格隔开 来选择后代元素，而在less中我们如何操作的呢？

  .box .son ul li a {
              font-size: 30px;
              color: red;
          }
  

3.1 less的注释

• 注释
  1. 单行注释：快捷键 ctrl+ /
     • //注释内容
  2. 多行注释：快捷键 shift+alt+a
     • /* 注释内容*/

3.3 less的计算方式

• 计算
  1. 进行+、-、*、/等运算
  2. 除法运算
     • 推荐使用：(操作数1 / 操作数2 )
     • 语法会报错不推荐使用：操作数1 ./ 操作数2

注意：运算符和操作数直接最好用空格隔开,这是很容易疏忽犯错的

• 运算的单位
  1. 如果运算的两个值都有单位，则以第一个单位为主
  2. 如果只有一个单位就以这个单位为主；

.box {
    // width: 3 * 200px ;
    // 如果单位一致就以当前单位为取值单位
    // 如果前后单位不一致，以前面单位为取值单位
    width: (600px / 2);
    // width: 600 ./ 2px;
    height: 150px;
    background-color: lawngreen;
}

3.4 less中的嵌套

• 一般的嵌套: 父级选择器中嵌套子级选择器
• 伪类伪元素嵌套: 需要在前面添加 &符号才能生效

a {
    // 当前页面所有的a默认下划线都清除 tdn
    text-decoration: none;
}
.nav {
    ul {
        li {
            // 伪类选择器
            &:nth-child(2) {
                background-color: pink;
            }
            a {
                font-size: 30px;
                color: #333;
                // 鼠标经过
                &:hover {
                    color: red;
                }
                // 伪元素
                &::after {
                    content: '>';
                    // 有衬线字体族，文字有装饰效果
                    font-family: serif;
                }
            }
        }
    }
}

3.5 less变量的定义

• 如何定义：@变量名称:值;
  • 如：@color: pink;
• 命名规范:
  1. 定义变量结束最后一定要跟英文封号；
  2. 必须有@为前缀，不能包含特殊字符，不能以数字开头
  3. 区分大小写

// @变量名称:值;
// 变量就是将公用或者常用的值保存起来，方便使用和修改
// 变量名称必须区分大小写，变量最终需要以引文的;号结尾
@col:red;

.box {
    width: 200px;
    height: 100px;
    background-color: @col;
}
p {
    color: @col;
}
span {
    color: @col;
}
a {
    color: @col;
}

3.6 导入less文件

• 作用：将一些公用的样式，直接导入到对应的样式文件中，不需要用link引入；
• 语法：
  1. 方法1： @import url(less文件路径);
  2. 方法2：@import ‘less文件路径’;
• 命名规范：
  1. 导入语句@import最后结束一定要写英文封号；
  2. 导入的文件是可以省略不写.less 文件后缀的。
  3. 导入语句要书写在导入文件的的最前面；

// @import样式导入：会将公用的样式导入到对应的文件，不需要使用link引入
// @import url(./base.less);
// @import './base.less';
@import './base';

3.7 从less导出css样式的路径

3.7.1 配置easy less默认导出路径（看第一点）

3.7.2 单独less路径导出

• 作用： 想让一个单独的less文件保存后生成的css文件位置为另外一个路径时使用
• 语法： ：//out:导出文件夹路径
• 注意
  1. 在最后选择文件夹需要加上 文件夹名+/ 才能选中文件夹
     如：//out:./…/abc/
  2. 书写单独输出路径的时候最后面不需要加封号；
  3. 必须写在less文件的第一行
  4. out后面的冒号必须是英文的冒号；

// out:./../bac/

3.7.3 禁止导出当前less文件为css

• 应用场景: 有些公用的样式不需要导出css，直接用@import导入到其他文件即可，那么我需要设置禁止导出为css语句控制；
• 语法: // out:false
• 注意： 禁止导出语句一定要写在文件的第一行，后面一定不能写封号；