在前端开发中，SASS 是一个非常流行的 CSS 预处理器。它能够让我们使用变量、嵌套、混合等高效的方式来编写 CSS 样式。在实际项目中，我们也经常需要引入外部的样式表，这时候我们就可以使用 @import with url() 语法来导入外部样式表。
什么是 @import with url() 语法？
在 SASS 中，我们可以使用 @import 指令来导入外部样式表。而 @import with url() 语法则是用来指定外部文件的路径的。例如：
@import url('https://fonts.googleapis.com/css?family=Open+Sans');这里我们使用了 @import with url() 语法来导入 Google Fonts 中的 Open Sans 字体。
在 SASS 中，我们可以使用 @import with url() 语法来导入外部样式表。例如：
@import url('path/to/external.scss');这里我们使用了 @import with url() 语法来导入一个名为 external.scss 的外部样式表。需要注意的是，路径可以是相对路径或绝对路径。如果是相对路径，则是相对于当前文件的路径。
示例代码
下面是一个示例代码，演示了如何在 SASS 中使用 @import with url() 语法导入外部样式表：
-- -------------------- ---- -------
-- -------
------- -----------------------------
-- ------
--------------- --------
-- ------
------ ------ -
-------- -------------
-------- ------ -----
---------- -----
------------ ----
------------ ----
----------- -------
---------------- -----
------------ -------
--------------- -------
------- --------
------------ -----
----------------- ---------------
------- --- ----- ---------------
------ -----
--------
------- -
----------------- ---------------------- -----
------------- ---------------------- -----
-
-
-- ----
---- -
-------- -------
-这里我们首先使用 @import with url() 语法导入了一个名为 external.scss 的外部样式表。然后定义了一个变量 $primary-color 和一个混合 button。最后，我们在 .btn 类中使用了这个混合。
总结
在 SASS 中使用 @import with url() 语法导入外部样式表，可以让我们更加方便地管理和组织样式。通过本文的介绍和示例代码，相信大家已经掌握了如何在 SASS 中使用 @import with url() 语法导入外部样式表的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657c21c6d2f5e1655d6e7e1f