如果您升级到 Dart Sass 1.77.7+,您可能需要移动样式中的一些嵌套项目。
最近几个月,我决定将这个基于Hugo的网站的样式保留为普通 CSS 和仅在生产中使用的PostCSS的组合。不过,如果需要的话,我仍然有代码可以使用Sass ;因此,出于好奇,我想看看它在较新版本的 Dart Sass 中的表现如何,我会不断更新我的存储库。结果我必须做出一些改变,特别是由于 Dart Sass 最近的改变。
我忽略了这样一个事实:从 Dart Sass v.1.77.7 开始(其发布日期显然是在2024-06-11到2024-07-11之间的某个时间),人们必须更加小心嵌套的放置项目。在该版本之前,以下内容运行良好:
.example { color : red ; a { font-weight : bold ; } font-weight : normal ; }
然而,从那时起,此类 SCSS 将触发弃用警告,并且在将嵌入式 Dart Sass 与 Hugo 一起使用的情况下,会导致 Hugo 崩溃。发出的警告将我指向 Sass 页面“重大更改:混合声明”,它解释了为什么较新的 Sass 版本不再接受这种样式,并且借用上面的示例,要求它如下所示:
.example { color : red ; a { font-weight : bold ; } & { font-weight : normal ; } }
就我自己而言,我遇到了各种各样的媒体查询,而修复它们被证明更具挑战性。这是此类 SCSS 的简化版本,在旧版本中没问题,但在 v.1.77.7 之后就不行了:
.example { font-family : sans-serif ; @media ( min-width : 720 px ) { font-family : serif ; } color : #000 ; }
。 。 。及其新需要的替换:
.example { font-family : sans-serif ; color : #000 ; @media ( min-width : 720 px ) { font-family : serif ; } }
虽然我也可以使用color
声明的& {}
路线,正如 Sass 弃用文档所建议的那样,但在大多数情况下,我实际受影响的 SCSS 已经足够混乱,我发现将媒体查询移动到每个的末尾会更容易宣言。我很幸运,这种修复,尽管我必须在相当多的文件中进行修复(因为我为了组织的原因分开了我的样式),但显然解决了我对新 Sass 版本的所有违规行为。
因此,如果您是最近没有升级过 Embedded Dart Sass 的 Hugo/Sass 用户,您可能需要腾出时间使用 v.1.77.7 之后的版本来测试现有的 SCSS。