如何处理 Sass 中的导入循环？

Question

我有一个名为index.sass的主sass文件，它定义了一些全局变量，例如颜色和主体样式，以及一个标题栏样式的TitleBar.sass。

index.sass：

@use './TitleBar'

$primaryColor: blue

body:
  box-sizing: border-box
  width: 100%
  height: 100%
  padding-top: $titleBarHeight
  overflow: auto

TitleBar.sass

@use './index'

$titleBarHeight: 32px
  
.titleBar
  position: fixed
  top: 0
  left: 0
  box-sizing: border-box
  width: 100%
  height: $titleBarHeight
  background: $primaryColor

问题是我想使用在TitleBar.sass中的index.sass中定义的$primaryColor，并且我想使用在index.sass中的TitleBar.sass中定义的$titleBarHeight。为此，我必须将它们相互导入，但如果这样做，就会出现循环导入错误。有没有办法实现这一点，或者我应该在index.sass中定义$titleBarHeight？

Answer 1

据我所知，您需要通过将代码拆分到不同的文件中来手动打破循环。

我发现为那些永远不会在各自组件样式之外使用的东西定义 local sass/scss 变量是一个很好的经验法则；而是将所有可能影响其他样式的变量移至专用的“常量”文件中。 您的 $titleBarHeight 和

$primaryColor

都属于后一类。为了说明这一点：

// index.sass
@import './page-layout'
@import './title-bar'

// page-layout.sass
@use './colors'
@use './dimensions'

body:
  box-sizing: border-box
  width: 100%
  height: 100%
  padding-top: $titleBarHeight
  overflow: auto

// title-bar.sass
@use './colors'
@use './dimensions'

$nav-item-gap: 8px // only for local use
  
.titleBar
  position: fixed
  top: 0
  left: 0
  box-sizing: border-box
  width: 100%
  height: $titleBarHeight
  background: $primaryColor

.navContainer
  display: flex
  gap: $nav-item-gap

// colors.sass
$primaryColor: blue
$secondaryColor: pink
// etc.

// dimensions.sass
$titleBarHeight: 32px
$pageFooterHeight: 16px
$pageGutter: 64px
// etc.