【问题标题】:sass import partials vs non-partialssass 导入部分与非部分
【发布时间】:2021-01-05 02:04:09
【问题描述】:

与这个问题有关,大部分问题是关于 CSS 导入 vs SASS 导入的。

我的问题更多是在同一个SASS import 下,将sass 文件定义为部分文件还是非部分文件有区别吗?

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

如上链接所述,

默认情况下,Sass 直接转译所有 .scss 文件。但是,当您要导入文件时,不需要直接转译该文件。

Sass 对此有一个机制:如果您以下划线开头的文件名,Sass 不会转译它。以这种方式命名的文件在 Sass 中称为部分文件。 因此,部分 Sass 文件以前导下划线命名:

我不太明白引用文本的含义,如果答案可以在SASS import 下列出我想使用部分与非部分的原因,那就太好了

【问题讨论】:

    标签: html css sass


    【解决方案1】:

    如果我正确理解你的问题,这里是答案:

    如果 Sass 转译器正在监视一个目录(通过命令窗口或通过编辑器扩展),您需要从转译中排除对这些文件的更改,而 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 中获得输出。那么是否导入partials都没有关系。

    如果你监视一个目录,例如:

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

    然后,如果您不使用部分文件,您将另外获得每个文件。

    【讨论】:

      【解决方案2】:

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

      当您查看 SASS 中当前的最佳实践时,我们有一个这样的文件夹结构(请参阅:Sass Guidelines):

      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
      

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

      1. 您可以构建模块化结构
      2. 您只需要转译 一个 SCSS 文件 (main.scss)。

      示例: sass sass\main.scss css\main.css

      重要:

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

      (见:SAass: @import

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

      【讨论】:

      • 如果我错了,请纠正我。上面是7-1 pattern,我不能在同一个文件夹结构下创建non-partials?比如abstracts/variables.scss,没有下划线会出问题吗?
      • 当你命名一个不带下划线的部分时,当你尝试导入文件时它应该会导致错误。但是您可以在其他部分中导入部分。此外,应该可以在此结构中创建非部分,但您应该将它们放在其他非部分旁边。我建议使用@use 而不是@import,如上所述。最大的好处是每个部分文件都有一个命名空间,而不是一个全局命名空间。
      • 实际上当我尝试导入文件时它没有导致任何错误。这就是为什么我没有看到任何明显的区别。感谢您指出@use tho 的用法
      • 您可能会指出 @use 仅支持 Dart-Sass 而不是 Node-Sass - 这是最常用的版本。并且@importing 非部分文件也不会导致错误。最大的好处是它全部编译成一个文件。
      猜你喜欢
      • 2012-12-16
      • 2017-05-29
      • 2016-08-31
      • 1970-01-01
      • 1970-01-01
      • 2016-09-20
      • 2017-05-01
      • 1970-01-01
      • 2014-09-17
      相关资源
      最近更新 更多