less、字体图标、精灵图笔记

less

css预编译工具
文件 .less

使用less书写css，把less编译成css文件 需要使用vscode的Easy LESS插件

1. 如何使用不可导出的less文件，如base.less，其中有如下注释：

// out:false  禁止导出

less文件导入 ： less文件最上面
  @import url(./base.less);
  @import url(./normalize);
  
2. 修改less文件的编译目录：
vscode设置搜索less，找到easyLESS，修改"out": "../css/"，后面的双引号中填路径。

官网有详细使用教程：less官网

字体图标

图标，但可以和字体一样用font-size调大小，用color调颜色。

网站：https://www.iconfont.cn/

选择想用的图标，加入购物车后，下载代码，解压后文件夹重命名为font放在css同级目录下：

先引用再使用：
<link rel="stylesheet" href="./font/iconfont.css">
使用方法：

1. 打开demo_index.html文件，可以找到图标对应的代码：如
   像这样：<span class="iconfont">&#xe60b;</span>
2. 也可以在iconfont.css中找到图标对应的类：如icon-a-16-23_fuzhi-06
   像这样：<span class="iconfont icon-a-16-23_fuzhi-06"></span>

对图标加样式可以在这个元素中在添加一个类：

  <span class="iconfont test">&#xe60e;</span>
  <span class="iconfont icon-a-16-23_fuzhi-06 right"></span>

    .right{
      font-size: 40px;
      color: #44f2f0;
    }
    .test {
      font-size: 200px;
      color: red;
    }

精灵图

精灵图的诞生：

页面中每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。
正应为如此，精灵图（sprite）应运而生，图片整合技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。

就是将多个小图拼在一个大图上面，将这个大图作为背景图片显示，调整到定位到需要使用的小图的位子。

background: url(./img/pwd-icons-new.png) -47px -94px;