导入和静默注释
原创...大约 2 分钟
导入 Sass 文件
css
有一个特别不常用的特性,即@import
规则,它允许在一个css
文件中导入其他css
文件。然而,后果是只有执行到@import
时,浏览器才会去下载其他css
文件,这导致页面加载起来特别慢。
sass
也有一个@import
规则,但不同的是,sass
的@import
规则在生成css文
件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css
文件中,而无需发起额外的下载请求。
使用sass
的@import
规则并不需要指明被导入文件的全名。你可以省略.sass
或.scss
文件后缀
跟原生的css
不同,sass
允许@import
命令写在css
规则内
/* aside.scss */
a {
background: blue;
color: white;
}
@import "aside" /* 导入方式1 */ div {
color: red;
@import "aside" /* 导入方式2 */;
}
提示
通过方式 1 导入后a
和div
属于同级关系,而通过方式 2 导入后a
和div
属于子父级关系,a
被解析到了div
里面
静默注释
css
中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你并不希望每个浏览网站源码的人都能看到所有注释。
sass
另外提供了一种不同于css
标准注释格式/* ... */
的注释语法,即静默注释,其内容不会出现在生成的css
文件中。静默注释的语法跟 JavaScript、Java 等类 C 的语言中单行注释的语法相同,它们以 //
开头,注释内容直到行末。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
实际上,css
的标准注释格式/* ... */
内的注释内容亦可在生成的css
文件中抹去。当注释出现在原生css
不允许的地方,如在css
属性或选择器中,sass
将不知如何将其生成到对应css
文件中的相应位置,于是这些注释被抹掉
body {
color/* 这块注释内容不会出现在生成的css中 */: #333;
}
轻松一刻 🎧
音乐
音乐
视频教程 🎥
至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服进行相关咨询。
Powered by Waline v2.15.7