头图

关于 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 关键字可以方便地定义和修改变量,从而提高代码的可维护性。另外,使用自定义属性来定义属性值可以使代码更具灵活性,因为自定义属性可以在运行时动态地修改。


Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
914 声望
1.6k 粉丝
0 条评论
推荐阅读
线性表的顺序存储和链式存储
在计算机科学中,线性表是一种常见的数据结构,用于存储一组具有顺序关系的元素。线性表中的元素之间存在一对一的前驱和后继关系,每个元素都有唯一的前驱和后继(除了首元素和末元素)。线性表可以通过顺序存储...

JerryWang_汪子熙阅读 99

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.7k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
914 声望
1.6k 粉丝
宣传栏