sass导入部分与非部分

Question

与这个问题相关的是，大多数问题都是关于CSS导入与SASS导入的。

我的问题更多的是在相同的SASS import下，将sass文件定义为部分文件和非部分文件之间有区别吗？

https://www.w3schools.com/sass/sass_import.asp

如上文所述，

默认情况下，Sass直接传输所有.scs文件。但是，如果要导入文件，则不需要直接对该文件进行transpile。

Sass有一种机制：如果文件名以下划线开头，Sass将不会对其进行转换。以这种方式命名的文件在Sass中称为部分文件。因此，部分Sass文件以一个前导下划线命名：

我不太明白它对引用的文本意味着什么，如果答案能列出我想在SASS import下使用部分与非部分的原因，那就太好了

Answer 1

如果我正确理解你的问题，下面是答案：

如果Sass transpiler正在监视目录(通过命令窗口或编辑器扩展名(，您将希望从transpiration中排除对这些文件的更改，而Sass可以很容易地做到这一点。只需在它们的名称前加一个下划线。

来源：https://www.tutorialsteacher.com/sass/import-files-and-partials

假设您使用：

"scss": "sass web/assets/scss/main.scss web/assets/css/main.css --style=compressed --watch"

当transpiller在main.scss中观察你导入文件的地方的变化时，你会在main.css中得到输出。然后不管你是否导入部分。

如果你观察一个目录，例如：

"scss": "sass web/assets/scss/ web/assets/css/ --style=compressed --watch"

然后，如果您不使用分部，那么您将另外获得每个单独的文件。

Answer 2

您可以在SASS文件中使用@import或@use。

当您了解SASS中当前的最佳实践时，我们有一个这样的文件夹结构(请参阅：SASS指南(：

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

如您所见，除main.scss外，所有SASS文件都以下划线_开头。所有部分文件都由主文件导入。有两个好处：

1. 您可以构建模块化结构
2. 您只需要传输一个SCSS文件(main.scss(

示例：sass sassmain.scss cssmain.css

重要信息：

Sass团队不鼓励继续使用@import规则。Sass将在未来几年逐步淘汰它，并最终将其从语言中完全删除。更喜欢@use规则。

(请参阅：SAass:@import(

使用@import将所有部分导入主文件时，它们共享一个命名空间。因此，当你在两个部分中使用$myvar时，最后导入的变量会覆盖它。因此，你现在应该更喜欢@use，它为每个部分文件创建一个单独的命名空间，例如mixins.$myvar、reset.$myvar。