当前位置：文江博客话题详情

导入样式表与 HTML 中链接相比有何优势？

发布于 2025-01-11 23:20:22 字数 99 浏览 0 评论 0原文

CSS import 关键字是否会在对链接样式表的单个请求期间通过本地访问或获取 Web 服务器上导入的样式表来阻止其他服务器请求？或者它主要是为了模块化，提供单点修改（链接样式表）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

往日 2025-01-18 23:20:22

我认为您可能在这里混淆了一些不同的事情。

在 Sass/SCSS 中，@import 用于向 Sass 文件/上下文添加额外的编程资源和/或将额外的样式捆绑在一起。这一切都是在编译时完成的，因此将有一个捆绑文件传递到浏览器，无需额外的 HTTP 调用（对于 CSS）。从 Sass @import 参考页面：

Sass 扩展了 CSS 的 @import 规则，能够导入 Sass 和 CSS 样式表，提供对 mixin、函数和变量的访问，并将多个样式表的 CSS 组合在一起。与普通 CSS 导入不同，后者需要浏览器在渲染页面时发出多个 HTTP 请求，Sass 导入完全在编译期间处理。

（此外，它已被弃用并计划删除，旨在替换为 @use 规则。）

在 CSS 中，@import 的行为是根据需要发出额外的 HTTP 请求来异步获取和加载额外的 CSS 文件。来自 MDN CSS @import 参考< /a>：

@import CSS at-rule 用于从其他样式表导入样式规则。
...
为了使用户代理可以避免检索不受支持的媒体类型的资源，作者可以指定依赖于媒体的@import规则。这些条件导入在 URL 后指定以逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。为媒体指定所有内容具有相同的效果。

至关重要的是，这种基于浏览器支持的动态获取只能在每个单独的浏览器中完成，而不是预编译。

根据你的问题，你写道：

...它是否可以防止单个 html 文件中存在多个链接标记？

我不确定这两个实例是否符合您的建议。我确实认为有时在开发模式下，您的捆绑过程可能会选择只注入几个

I think you might be conflating a few different things here.

In Sass/SCSS, @import is used to add additional programmatic resources to a Sass file/context and/or to bundle together additional styles. This is all done at compilation time, so there will be a single bundled file to be delivered to the browser, with no additional HTTP calls necessary (for CSS). From the Sass @import reference page:

Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation.

(Also, it is deprecated and slated for removal, intended to be replaced by the @use rule.)

In CSS, @import behaves by making additional HTTP requests to fetch and load additional CSS files asynchronously and as needed. From the MDN CSS @import reference:

The @import CSS at-rule is used to import style rules from other style sheets.
...
So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URL. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

Critically, this type of dynamic fetching based on browser support could only be done in each individual browser, not precompiled.

From your question, you write:

...does it prevent multiple link tags in a single html file?

I'm not sure either instance does what you are suggesting. I do think that sometimes in a development mode, your bundling process may opt to just inject several <style/> blocks or <link/> elements rather than bundling all the CSS. I suppose logically in both Sass and CSS contexts the @import is technically replacing or otherwise preventing the need for several <link/> elements from being added, but that is a bit of a simplification of how/why they are used.

回复收藏 0 原文

~没有更多了~