文章目录

• 一 图标库
• • 图标库的使用方式
  • • 方式1 引入在线图标库
    • 方式2 下载图标库到本地
• 二 选择器权重
• • 单个选择器权重
  • 组合选择器（复合选择器）
  • 加法运算
• 三 SASS
• • 概念：
  • 使用：借助vscode的插件来帮助配置sass环境及开发
  • 嵌套
  • 变量：保存数据的容器
  • 混合：包装一段需要重复使用的代码

一 图标库

在前端开发过程中有很多成熟的图标库可以供我们使用

图标库地址：https://fontawesome.dashgame.com/

图标库的使用方式

方式1 引入在线图标库

把在线的图标库css代码。引入你到文件中

 fa-camera-retro

方式2 下载图标库到本地

下载css到本地

下载过后的压缩包有两个文件夹 css、fonts都要拷贝项目中

代码和之前一样

图标需要显示出来必须 class=“fa fa-图标名字”

二 选择器权重

单个选择器权重

在页面上我们默认情况下

id选择器>class选择器>元素选择器

选择器约精确，优先级会越高

组合选择器（复合选择器）

计算复合选择器权重问题，我们有两种计算方法

1. 给每一类型的选择器进行权重赋值，加结果加起来比较（加法运算）
2. 根据选择器每个位置，采用位置对比法（4个0对比）

加法运算

内联样式权重值为1000

id选择器权重值为100

类选择器（伪类、属性）权重值为10

元素选择器权重为1

.sp:权重值为10

div span:权重值1+1-=2

.box span权重值为 11

三 SASS

概念：

• SASS是一个css的预处理器，有助于减少css代码的重复使用，节省开发时间，更好处理权重问题，它是一款强大的css扩展语言。
• css预处理器：我们来编写 Sass 代码，Sass 代码再转换成标准的 CSS 代码！
• sass的好处：
  1. sass可以支持嵌套语法
  2. sass还提供了：变量、混合等…，它能实现样式和属性的复用，达到一处改处处改的效果

使用：借助vscode的插件来帮助配置sass环境及开发

官网：https://www.sass.hk/

1. 安装插件,搜索easy sass
2. 创建scss文件夹
3. 在文件夹中创建以.scss后缀结尾的sass文件

1. 根据你的工作区去配置sass编译输出路径，从工作区出发去查找文件的。如果实在拿不准，就使用绝对路径

   注意：如果下一次新开发项目，需要重新配置该路径

嵌套

&指向当前选择器本身

变量：保存数据的容器

重复数据可以保存在一个变量中，之后要使用这个数据直接调取这个变量名就可以了

语法：

$变量名:样式的值;
选择器{样式名:$变量名
}

混合：包装一段需要重复使用的代码

@mixin 混合名{混合里的css样式1；混合里的css样式2；...
}
选择器{@include 混合名
}