如何将scss转换成css文件

html-css06

如何将scss转换成css文件,第1张

如:在D盘建立一个SASS文件夹,文件夹下有一个style.scss文件(scss,sass都行。sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。scss对代码的要求没那么高。)用下面的方法可以将sass或者scss转换为css文件。

首先输出 D: 代表找到D盘 ;

然后输出cd sass 代表找到sass文件夹,其中cd是一定要的;

最后输出 sass>sass --watch style.scss:style.css 在sass文件夹下将style.scss转换为style.css 。sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。

在使用带有工作区和源地图的Chrome并设置了本地/网络文件时,我可以使用Chrome Web检查器(在Elements->styles窗格下)识别选择器在正确的SCSS文件中的位置。另外,我可以单击该按钮,将其转到SCSS文件,进行更改,然后将其成功保存到文件系统中。但是,我以前的工作是在elements->styles面板中进行了更改以在SCSS文件中进行更新(即,如果我在Elements选项卡中进行了更改并检查了chrome中的SCSS文件,则应该对其进行了更改)。

相反,它将对CSS文件进行更改。显然,这不是非常有用,因为:

更改SCSS文件后,它将被覆盖

这意味着即使重新加载后,Chrome也会显示SCSS文件中没有的样式,因为样式会永久保存在CSS文件中

我已经使用Sass 3.3.6在OSX和Windows上进行了尝试。

也可以确认不是#9中提到的" ../"问题

https://code.google.com/p/chromium/issues/detail?id=273384,因为sass文件现在位于css文件中。样式表标签上也没有style.css?ver = x扩展名。

您想要的是https://code.google.com/p/chromium/issues/detail?id=257778。 通常,如果涉及变量或复杂的语言功能,则在"样式"面板被编辑时不可能(模糊)在CSS上修补SCSS,因此最好的选择是Ctrl,然后在"样式"窗格中单击所需的CSS属性以导航到 相应的SCSS片段并编辑纯SCSS资源文本,然后保存(Ctrl + S),然后让sass编译器(在监视模式下运行)完成其余工作。 您应该同时启用Enable CSS source maps和Auto-reload generated CSS设置,以使DevTools能够拾取生成的CSS更改。

导入.sass或.scss文件

css有一个不太常用的特性,即@import导入功能,它允许在一个css文件中导入其他css文件。然而,结果是只有执行到@import规则时,浏览器才会去下载其他css文件,这会导致页面样式加载特别慢,从而容易出现页面闪的问题。

sass也有@import导入规则,与css不同的是,sass中的@import规则会在生成css文件时,把相关的文件导入合并成一个文件,而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可以在导入文件中正常使用。

在使用@import导入sass文件时,可以省略sass文件的后缀名.sass或.scss,例如:

- a.scss

body {

background-color: #f00

}

- style.scss

@import "a"

div {

color: #333

}

编译后的style.css文件内容如下:

body {

background-color: #f00

}

div {

color: #333

}