如何将Neat网格的SCSS自定义网格代码转换为SASS？

嘿，别担心，SCSS和SASS本质是同一种预处理器的两种语法风格，转换起来其实很简单！针对你给出的这段SCSS映射变量，我来一步步帮你转成标准的SASS语法。

原SCSS代码回顾 #

首先先看你要转换的SCSS代码：

$my-custom-grid: (
  columns: 12,
  gutter: 20px,
  media: 1200px,
  color: rgba(#00d4ff, 0.25),
  direction: ltr,
);

这是一个定义了网格配置的SCSS映射（map）变量，用大括号包裹、逗号分隔键值对，是SCSS的块级语法风格。

转换后的SASS代码 #

对应的SASS缩进式语法是这样的：

$my-custom-grid: (
  columns: 12
  gutter: 20px
  media: 1200px
  color: rgba(#00d4ff, 0.25)
  direction: ltr
)

关键语法差异说明 #

• 去掉大括号和分号：SASS用缩进（建议2或4个空格，保持统一）来代替SCSS的大括号和分号，所以每个键值对换行后对齐缩进即可
• 删除逗号：映射里的每个键值对末尾不需要加逗号，最后一项也不用
• 兼容的部分：像rgba(#00d4ff, 0.25)这种颜色函数写法、变量名$my-custom-grid，在SCSS和SASS里是完全通用的，不需要修改
• 后续使用不变：如果你之后要从这个映射里取值（比如map-get($my-custom-grid, columns)），这个函数调用的语法在两种语法里是一样的，直接用就行

这样转换后，这个SASS变量就能在你的Neat项目里正常使用啦！

内容的提问来源于stack exchange，提问作者BerlinaLi