css怎么引用scss

html-css031

css怎么引用scss,第1张

你应该先搞清楚什么是css,什么事SCSS?css与scss之间 的关系;

简单给你说就是scss是css的前身,scss通过编译后生成css,css可以直接在网页中使用,如果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

}