关于前端:关于-Web-应用的内联-css-和-scss-文件里的-var-关键字用法

为什么网站性能调优准则里都强调要 Use inline fonts and CSS instead of loading them asynchronously？

网站性能优化的一个重要指标是尽可能地缩短页面加载工夫，使用户能够更快地拜访您的网站。加载字体和 CSS 样式表是构建页面的重要组成部分，然而它们也可能导致页面加载速度较慢，从而影响用户体验。因而，倡议应用内联字体和 CSS 样式表，而不是异步加载它们。

应用内联字体和 CSS 样式表能够防止页面加载时的额定 HTTP 申请，从而放慢页面加载速度。在内联模式下，字体和样式表间接嵌入到 HTML 文档中，使得页面在加载时只需下载一个文档即可出现残缺页面，这样用户就能够更快地看到网站内容。与此相反，异步加载字体和 CSS 样式表须要额定的 HTTP 申请和下载工夫，可能导致页面加载速度变慢，特地是在网络速度较慢或访问量较大的状况下。

因而，应用内联字体和 CSS 样式表是一种性能优化的最佳实际，能够帮忙进步网站的性能和用户体验。

以下是一个内联字体的例子。

<style>
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(data:font/woff2;base64,d09GMgA

在 .scss 文件中，能够应用 $ 符号来定义变量。这些变量能够在整个 .scss 文件中应用，以便在不同的款式规定中应用雷同的值，从而简化了代码的编写。

以下是一个例子：

$primary-color: #007bff;

.button {background-color: $primary-color;}

在下面的示例中，$primary-color 变量被定义为 #007bff，并且在 .button 款式规定中应用了这个变量，从而使按钮的背景色彩为 $primary-color 定义的色彩。

此外，.scss 还反对应用计算表达式和操作符来定义变量，例如：

$padding: 10px;
$margin: $padding * 2;

.box {
  padding: $padding;
  margin: $margin;
}

在下面的示例中，$margin 变量应用了计算表达式 $padding * 2 来定义，从而使 .box 款式规定中的 margin 值为 $padding 值的两倍。这样能够防止硬编码值，使代码更加灵便和易于保护。

在 SCSS 中，关键字 var 用于定义一个自定义的变量，并应用该变量来定义属性的值。定义变量时，能够为其指定一个默认值，并在后续应用中笼罩该值。

例如，以下是一个应用 SCSS 中的 var 关键字定义和应用变量的示例：

$primary-color: blue; // 定义变量

a {color: var(--color, $primary-color); // 应用变量
}

在下面的示例中，$primary-color 变量定义为蓝色，而后在 a 元素的款式中，应用 var 关键字来定义色彩属性的值。var 函数承受两个参数：第一个参数是要应用的变量名，第二个参数是变量的默认值。在这个示例中，如果 –color 自定义属性没有定义，则应用 $primary-color 变量的值作为色彩属性的值。

应用 var 关键字能够不便地定义和批改变量，从而进步代码的可维护性。另外，应用自定义属性来定义属性值能够使代码更具灵活性，因为自定义属性能够在运行时动静地批改。