css - 在 VSCode 中运行 SASS

标签 css visual-studio-code sass

我已经安装了扩展程序 Live SASS Compiler (live-sass),但在编译有效 (?) SASS 时出现编译错误。

部分文件仍然是普通的CSS,部分文件是SASS,应该是兼容的。

我只是找不到这里的错误...

@import "ci_template.css";

body
	font-family:calibri,sans-serif,Arial
	margin:0px
	color:var(--ci-clr-primary)

/************/
/*	Header	*/
/************/ 

#header
	font-weight:bold
	background-color:var(--ci-clr-primary)
	color:white
	overflow: hidden
	#header-logo img
		width:var(--ci-logo-width)
		margin:var(--ci-logo-margin)
	#header-text
		line-height:100px
		font-size: 2.5em
	div
		float: left
		display: block

/************/
/*	topnav	*/
/************/

#topnav
	overflow: hidden
	background-color: darkgrey
	a
		float: left
		display: block
		color: white
		text-align: center
		padding: 14px 16px
		text-decoration: none
		font-weight:bold
		:hover,
		:focus
			background-color: #ddd
			color: grey

[...]

保存时 live sass 控制台出现这个错误:

Compilation Error
Error: Invalid CSS after '..._template.css";': expected 1 selector or at-rule, was "body"
        on line 1 of sass/c:\xampp\htdocs\projects\archiv\general.scss
>> @import "ci_template.css";
   --------------------------^

--------------------
Watching...
--------------------

最佳答案

我发现了问题。

我使用的是 .SCSS 源文件,但其中包含 SASS 语法。

重命名文件扩展名,清理 SASS 的 SCSS 语法,现在它按预期工作。

关于css - 在 VSCode 中运行 SASS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59103319/

相关文章:

java - Jquery 访客通知框

css - 中心 div 正在脱离父页面

css - Browser Hack 在 Fluid Design 中停止工作

format - VS code Format Code命令和快捷键Shift+Alt+F不起作用

跨 Angular 组件相对于父级父级的 CSS 定位

css - Drupal-add-css 没有响应

css - 如何旋转 SVG 路径元素而不使其绕圈移动?

powershell - VS Code 终端颜色很奇怪

visual-studio-code - 在 VS 代码中按 F5 无法打开新窗口来调试我的自定义主题

sass - 如何处理 Bower 组件图像、字体或其他 Assets (使用自耕农)?