Sass的一些用法Sass的一些用法 一、新建.scss文件 在@/assets/css下面新建variable.scs

Sass的一些用法

一、新建.scss文件

在@/assets/css下面新建variable.scss文件

二、Sass定义变量

使用Sass语法定义一些颜色变量

$main-color: #3E92FE;
$blueF:#29c0ff;
$yellowF:#f5a100;
$redF:#ff404b;

在其他地方我们可以直接这样用

.pzCountActive {
    color: $yellowF !important;
}

而解决了对重复样式的重复书写问题，可以简化css的开发

使用Sass语法定义图片资源的路径前缀

$img-prefix: "@/assets/img/"

在css中我们可以这样使用

.header {
    width: 1920px;
    height: 70px;
    background: url($img-prefix + "header.png") no-repeat;
    align-items: center;
    justify-content: center;
}    

从而简化图片资源的引用方式

三、Sass中使用mixin语法

我们可以在Sass中使用mixin语法，来定义一些css整体

// 宽高
@mixin wihe($w: 0px, $h: 0px) {
    width: $w;
    height: $h;
}

// 定位 left top
@mixin posltz($l: 0px, $t: 0px, $z: 0) {
    position: absolute;
    left: $l;
    top:$t;
    z-index: $z;
}

// 定位 right top
@mixin posrtz($r: 0px, $t: 0px, $z: 0) {
    position: absolute;
    right: $r;
    top:$t;
    z-index: $z;
}

// 字体
@mixin fonts($size: 12px, $c: #fff, $w: 500,$l:12px) {
    font-size: $size;
    color: $c;
    font-weight: $w;
    line-height: $l;
}

在css中，我们可以直接这样使用

.mainTitle{
    @include wihe(100%, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    @include fonts(26px,#fff,500,56px);
    font-family: SH;
}

四、@font-face 规则引入自定义字体

首先，将.ttf文件放到@/assets/fonts文件夹下

@font-face 是一个 CSS 规则，用于定义自定义字体并让网页可以使用它。这允许网页开发者在网页中使用本地不存在的字体，而不需要依赖用户的设备上安装该字体。

// 通过 @font-face 规则将名为 "SourceHanSansCN-Regular" 的字体文件引入，并将其命名为 "SH"
@font-face {
  // 定义自定义字体的名称  
  font-family: "SH";
  // 定义字体文件的路径
  src: url("@/assets/fonts/SourceHanSansCN-Regular.ttf");
}
@font-face {
  font-family: "PMZD";
  src: url("@/assets/fonts/PangMenZhengDao.ttf");
}
@font-face {
  font-family: "SMH";
  src: url("@/assets/fonts/SimHei.ttf");
}

在页面中我们可以这样使用

body {
  font-family: "SH", sans-serif;
}