Day12-字体图标库和SCSS

文章目录

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

一 图标库

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

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

图标库的使用方式

方式1 引入在线图标库

把在线的图标库css代码。引入你到文件中
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
head>
<body>
    <i class="fa fa-camera-retro">i> fa-camera-retro

    <div>
        <i class="fa fa-bath">i>
    div>
body>
html>

方式2 下载图标库到本地

下载css到本地

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

代码和之前一样

<link rel="stylesheet" href="./css/font-awesome.css">

图标需要显示出来必须 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 sassDay12-字体图标库和SCSS_第1张图片
  2. 创建scss文件夹
  3. 在文件夹中创建以.scss后缀结尾的sass文件

image-20230304154541548

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

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

Day12-字体图标库和SCSS_第2张图片

嵌套

Day12-字体图标库和SCSS_第3张图片

&指向当前选择器本身

变量:保存数据的容器

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

语法:

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

Day12-字体图标库和SCSS_第4张图片

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

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

Day12-字体图标库和SCSS_第5张图片

你可能感兴趣的:(前端,scss,css,前端)