@import

358 阅读1分钟

css@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。

scss@import规则,但不同的是,scss@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

  使用scss@import规则并不需要指明被导入文件的全名。你可以省略.sass.scss文件后缀。这样,在不修改样式表的前提下,你完全可以随意修改你或别人写的被导入的scss样式文件语法,在sassscss语法之间随意切换。举例来说,@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。