插件目录中的SCSS和CSS文件?

时间:2016-11-04 19:53:23

标签: css sass

请原谅我,如果这是天真的,但我习惯只使用CSS。 Sass看起来很酷,我很想学习它,但由于某种原因,我正在下载的许多Javascript或jQuery插件都有一个与样式表相关的CSS和SCSS文件。我不想编辑两个文件来获取页面上的结果,除了几个关键区域之外,为什么它们看起来像副本?看下面的图片,似乎每个SCSS都有一个额外的CSS文件。那是因为有些浏览器无法编译SCSS吗?

CSS and SCSS in same directory

2 个答案:

答案 0 :(得分:1)

没有浏览器(至少是主要版本)能够直接使用SASS(或LESS)。在使用它们之前,总是需要将scss文件编译为css。

您可以使用gruntgulp等构建工具编译css。您甚至可以将其配置为在scss文件中查看更新,并在任何更改时重新编译css。

构建后可以使用以下类型的文件:

style.scss <- this is source file    
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified 
style.css.map <- this is source map of scss file

Here你可以阅读为什么缩小css文件的原因。 Here您可以阅读什么是源地图。

答案 1 :(得分:1)

  

是因为某些浏览器无法编译SCSS吗?

是。有一个命令行实用程序可将.scss转换为.css。对于理解它的浏览器检查员来说,.map文件可能是一个反向转换辅助工具。

每当我生成文件(例如.min.js.css来自.scss)时,我都会确保自动执行相应的命令行转换工具作为构建脚本的一部分。

我不确定您使用的是哪种构建系统,但是有一些需要执行的转换命令行工具。

您不应该手动更新这两种格式。 SCSS到CSS命令行转换器早在任何浏览器(还有一个?)开始支持SCSS之前就存在了。