如何在SASS中使用网格模板区域[重复]

Question

 .nevigate-page
     display: grid
     grid-template-areas: 'navigation-icon arrow-left' 
                          'navigation-text arrow-left'
     gap: 1.25rem
 .nevigation-icon
         grid-area: nevigation-icon
 .nevigation-text
         grid-area: nevigation-text
 .arrow-left
         grid-area: arrow-left

// 上面的代码不起作用并出现以下错误

[plugin:vite:css] [sass] 预期的标识符。 ╷ 116 │ grid-template-areas: '导航图标左箭头' │ ^ ╵ src\pages\NotFound\index.sass 116:67 根样式表

我想要左侧有图标和文字，右侧有左箭头

Answer 1

我的猜测是你没有将其设置为使用SASS而是SCSS，两者之间的语法可能性有很大差异。所以有两个选择

1. 正确设置SASS
2. 更改为使用正确的 CSS 语法（推荐）

CSS语法

.nevigate-page {
  display: grid;
  grid-template-areas: 'navigation-icon arrow-left'
    'navigation-text arrow-left';
  gap: 1.25rem;
}

.nevigation-icon {
  grid-area: navigation-icon;
}

.nevigation-text {
  grid-area: navigation-text;
}

.arrow-left {
  grid-area: arrow-left;
}