SassMeister 在线解释器:无效的 CSS，应为“{"，为“" [英] SassMeister online interpreter: Invalid CSS, expected "{", was ""

问题描述

当我将此 sass 复制并粘贴到在线 sass 转换器时，我收到一个错误，这很奇怪，因为原始项目有效.你能发现错误吗?我不能.它通常开箱即用.这是 codepen.io 上的工作项目:.如果你的解释器在处理你的代码时没有任何错误，而不管缩进如何，它就不会严格执行 Sass 语法规范.试试下面的代码，它完全一样，但添加了标签:

html、正文、h1高度:100%宽度:100%身体过渡:背景色 0.3 秒缓入font-family: 'Open Sans', sans-serif背景色:hsl(350, 100%, 50%)//在 firefox 中，转换后的元素在超出元素大小时会导致滚动，因此我们将禁用它溢出:隐藏字体大小:12px@media(最小宽度:480px)字体大小:14px@media(最小宽度:640px)字体大小:16px.单词font-family: 'Bangers', 草书svg高度:100%宽度:100%位置:相对顶部:-1rem动画:弹出 2 秒缓入无限.单词font-family: 'Bangers', 草书字母间距:0.05em白颜色填充:0.5em字体大小:28px@media(最小宽度:480px)字体大小:36px@media(最小宽度:640px)字体大小:48px@media(最小宽度:960px)字体大小:64px@media(最小宽度:1280px)字体大小:84px磷位置:固定底部:0左:0右:0行高:2rem文本对齐:居中颜色:透明化(白色，0.25)背景色:透明化(#222, 0.0)@keyframes 弹出0%变换:scale3d(0, 0, 1)不透明度:125%变换:scale3d(1, 1, 1)不透明度:1100%变换:scale3d(1.5, 1.5, 1)不透明度:0a, a:访问过颜色:继承

When I copy and paste this sass into the online sass converter I get an error which is weird because the original project worked. Can you spot the error? I can't. It usually works right out of the box. This is the working project on codepen.io: https://codepen.io/LandonSchropp/pen/xLtif

html, body, h1

height: 100%
width: 100%

body
transition: background-color 0.3s ease-in
font-family: 'Open Sans', sans-serif
background-color: hsl(350, 100%, 50%)

// in firefox, a transformed element causes a scroll when it extends beyond the element's size, so we'll disable it
overflow: hidden

font-size: 12px

@media (min-width: 480px)
font-size: 14px

@media (min-width: 640px)
font-size: 16px

.word
font-family: 'Bangers', cursive

svg
height: 100%
width: 100%
position: relative
top: -1rem
animation: pop-out 2s ease-in-out infinite

.word
font-family: 'Bangers', cursive
letter-spacing: 0.05em
color: white
padding: 0.5em

font-size: 28px

@media (min-width: 480px)
font-size: 36px

@media (min-width: 640px)
font-size: 48px

@media (min-width: 960px)
font-size: 64px

@media (min-width: 1280px)
font-size: 84px

p
position: fixed
bottom: 0
left: 0
right: 0
line-height: 2rem

text-align: center
color: transparentize(white, 0.25)
background-color: transparentize(#222, 0.0)

@keyframes pop-out
0%
transform: scale3d(0, 0, 1)
opacity: 1
25%
transform: scale3d(1, 1, 1)
opacity: 1
100%
transform: scale3d(1.5, 1.5, 1)
opacity: 0

a, a:visited
color: inherit

https://www.sassmeister.com/

The exact compiler error is Invalid CSS after " color: inherit": expected "{", was ""

解决方案

There are 2 issues here:

1. You need to change to the Sass syntax, because by default it's on SCSS which doesn't allow omitting brackets (which is what the error message is telling you)

2. Once you do that you'll get a more helpful error:

   Properties are only allowed within rules, directives, mixin includes, or other properties.

   This is because the Sass interpreter expects properties within blocks to be indented^[1]. If your interpreter was processing your code without any errors regardless of indentation it does not strictly enforce the Sass syntax specification. Try the code below, which is exactly the same, but with tabs added:

   html, body, h1
   
     height: 100%
     width: 100%
   
   body
     transition: background-color 0.3s ease-in
     font-family: 'Open Sans', sans-serif
     background-color: hsl(350, 100%, 50%)
   
     // in firefox, a transformed element causes a scroll when it extends beyond the element's size, so we'll disable it
     overflow: hidden
   
     font-size: 12px
   
   @media (min-width: 480px)
     font-size: 14px
   
   @media (min-width: 640px)
     font-size: 16px
   
   .word
     font-family: 'Bangers', cursive
   
   svg
     height: 100%
     width: 100%
     position: relative
     top: -1rem
     animation: pop-out 2s ease-in-out infinite
   
   .word
     font-family: 'Bangers', cursive
     letter-spacing: 0.05em
     color: white
     padding: 0.5em
   
     font-size: 28px
   
   @media (min-width: 480px)
     font-size: 36px
   
   @media (min-width: 640px)
     font-size: 48px
   
   @media (min-width: 960px)
     font-size: 64px
   
   @media (min-width: 1280px)
     font-size: 84px
   
   p
     position: fixed
     bottom: 0
     left: 0
     right: 0
     line-height: 2rem
   
     text-align: center
     color: transparentize(white, 0.25)
     background-color: transparentize(#222, 0.0)
   
   @keyframes pop-out
     0%
       transform: scale3d(0, 0, 1)
       opacity: 1
     25%
       transform: scale3d(1, 1, 1)
       opacity: 1
     100%
       transform: scale3d(1.5, 1.5, 1)
       opacity: 0
   
   a, a:visited
     color: inherit
   

这篇关于SassMeister 在线解释器:无效的 CSS，应为“{"，为“"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！