css
有一个特别不常用的特性,即@import
规则,它允许在一个css
文件中导入其他css
文件。然而,后果是只有执行到@import
时,浏览器才会去下载其他css
文件,这导致页面加载起来特别慢。
sass
也有一个@import
规则,但不同的是,sass
的@import
规则在生成css
文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css
文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合器(参见2.5节)均可在导入文件中使用。
使用sass
的@import
规则并不需要指明被导入文件的全名。你可以省略.sass
或.scss
文件后缀(见下图)。这样,在不修改样式表的前提下,你完全可以随意修改你或别人写的被导入的sass
样式文件语法,在sass
和scss
语法之间随意切换。举例来说,@import
"sidebar";这条命令将把sidebar.scss
文件中所有样式添加到当前样式表中。
本节将介绍如何使用sass
的@import
来处理多个sass
文件。首先,我们将学习编写那些被导入的sass
文件,因为在一个大型sass
项目中,这样的文件是你最常编写的那一类。接着,了解集中导入sass
文件的方法,使你的样式可重用性更高,包括声明可自定义的变量值,以及在某一个选择器范围内导入sass
文件。最后,介绍如何在sass
中使用css
原生的@import
命令。
通常,有些sass
文件用于导入,你并不希望为每个这样的文件单独地生成一个css
文件。对此,sass
用一个特殊的约定来解决。
在本章中,我们将研究 SASS输出样式。SASS生成的CSS文件由反映文档结构的默认CSS样式组成。默认的CSS样式是好的,但可能不适合所...
描述SASS使用 class 或 id 选择器支持占位符选择器。 在正常CSS中,这些用“#”或“。”指定,但在SASS中,它们替换为“%”。 ...
描述 @ {variable} 符号用作变量名,id和类名的一部分。 扩展不具有使选择器与变量匹配的能力。 扩展可以连接到内插选择器。例子...
描述数字从一个单位转换为另一个单位。 它包括两个论点; 第一个参数遍编号以及单位和第二个参数包含单位。 当本机兼容时,转换该...