为什么首页引入的是css，但浏览器f12却是scss
导入.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;
}
SCSS 有那些优势，是否可以全面取代CSS
怎么可能取代css，这些甜甜圈的最终都是解析还原成css的。
举个简单例子，比如我用php或js做了个css语法糖，里面你可以这样写：
#test1 to 3{fn:12px;}
你把文件保存为*.ecss，然后我写的程序遇到ecss后缀文件就会去处理成：
#test1{font-size:12px;}
#test2{font-size:12px;}
#test3{font-size:12px;}
最终把上面3行标准的css语法返回给浏览器。
优势也没多大，就是写的时候能省些事，用这些玩意坏处也多，首先是你网站比直接用css多一个解析还原的过程，不管你把这个放在后台还是前台完成都会多耗费点时间。第二，一个语法糖的学习成本是存在的，如果不是有专门规范的团队集团使用的话，比如你不会，你去接手一个别个用这个玩意写的项目，维护就很不方便，同理你会，你写的项目别人再接手也很烦的。
另外据老外的文章说w3c也在参考这些语法糖的优势，下一个版本的css原生的会自带很多类似的功能。
怎么让ruby自动生成scss文件
编译sass文件 在命令行下进入到sass文件所在目录,运行>compass compile 也可以指定要编译的文件>compass compile fileName.scss#sass文件夹下会有个config文件指定编译后的css存放位置.
如何安装并编译sass为css文件
1、koala软件编译2、sass命令:依靠环境.自动编译命令:(编译单个文件/编译整个文件夹) 编译单个文件 sass文件目录 sass –watch scss文件的路径:css文件的路径 –style expanded 编译整个文件夹 sass文件目录 sass –watch scss文件夹/. : css文件夹/. –style expanded3、gulp编译4、hbulid编译 ① 工具–预编译设置 ② 新建一个预编译配置 .scss ③ 输入触发命令的地址:ruby里面的sass.bat地址 ④ 命令参数:%FileName% ../css/%FileBaseName%.css
hbuild怎么引用scss文件
Sass的安装:
1.安装：SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
2：使用：
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。SASS提供两种编译方式，一种是手动编译，一种是监视编译(–watch)，手动编译就是当你撰写好CSS时下指令去做编译，监视编译则是你指令一个目录，当此目录里面的*.scss档案有改变时（新增、覆写等等），就会自动去做编译的动作。先来讲手动编译方式：
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass –style compressed test.sass test.css
还有一种监视的方式做编译，在命令行中切换到当前sass或者scss文件所在的目录，然后运行
sass –watch scss:css
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
Compass的安装:
1.安装：安装ruby之后，输入命令
gem install compass
2.使用：创建一个 COMPASS 项目
在命令行中切换到你需要创建项目的目录，运行：
compass create “projectname”
这个命令会创建一个包含一系列文件的目录，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以删除。
在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。
实时编译 SASS 文件
COMPASS 提供的默认方法是：
在命令行下切换到项目目录，运行
compass watch
COMPASS 将会实时监控 SASS 目录的文件变化，只要你一保存文件，立即将相应文件编译为 CSS 文件。
sass和less的最大区别是什么呢？
您好，对于你的遇到的问题，我很高兴能为你提供帮助，我之前也遇到过哟，以下是我的个人看法，希望能帮助到你，若有错误，还望见谅！。sass和less主要区别在于实现方式: less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。
一、less：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
二、sass 与 less 的区别 ：
1、sass与less的安装 ：sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。less 在服务器端最容易的安装方式就是通过 npm（node.js 的包管理器）。less 在客户端使用【.less】（LESS源文件），只需要在官网载一个javascript脚本文件主【less.js】，然后在我们需要引入LESS源文件的html的中加入如下代码：
2、变量 ：sass 是以开头定义的变量，如：mainColor: #963; less 是以@开头定义的变量，如 @mainColor: #963;
3、作用域 ：sass 没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss 文件中。注意变量名重复； less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。非常感谢您的耐心观看，如有帮助请采纳，祝生活愉快！谢谢！
less以及sass两者什么区别
sass和less主要区别在于实现方式: less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。
一、less：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
二、sass 与 less 的区别 ：
1、sass与less的安装 ：sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。less 在服务器端最容易的安装方式就是通过 npm（node.js 的包管理器）。less 在客户端使用【.less】（LESS源文件），只需要在官网载一个javascript脚本文件主【less.js】，然后在我们需要引入LESS源文件的html的中加入如下代码：
2、变量 ：sass 是以开头定义的变量，如：mainColor: #963; less 是以@开头定义的变量，如 @mainColor: #963;
3、作用域 ：sass 没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss 文件中。注意变量名重复； less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。
sass和less的区别在哪里?
1.编译环境不一样
Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less
代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到
项目中。
2.变量符不一相
less是@，而scss是$,而且它们的作用域也不一样，less是块级作用域
3.输出设置不一样
Less没有输出设置，sass提供4种输出选项，nested,compact,compressed和expanded nested：
嵌套缩进的css代码(默认) expanded：展开的多行css代码 compact：简洁格式的css代码
compressed：压缩后的css代码
4.sass支持条件语句，可以使用if{}else{},for{}循环等等，而less不行
5.引用外部css文件
sass引用外部文件必须以开头，文件名如果以下划线形状，sass会认为该文件是一个引用文件，
不会将其编译为css文件。less引用外部文件和css中的@import没什么差异。
6.sass和less的工具库不同
sass有工具库Compass, 简单说，sass和Compass的关系有点像Javascript和jQuery的关系,
Compass是sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了
sass的功能。less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI
组件库，Bootstrap的样式文件部分源码就是采用less语法编写。
总结：
不管是sass，还是less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更
灵活和更强大，sass的功能比less强大,基本可以说是一种真正的编程语言了，less则相对
清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译sass要安装Ruby,而Ruby官网在
国内访问不了,个人在实际开发中更倾向于选择less。 （BY三人行慕课）
SCSS和LESS相比有什么优势
就是比less扩展性好