使用@import可以将SCSS或CSS文件导入到主文件中, 因此基本上可以将多个文件组合在一起。
语法如下:
@import 'Relative path to the file1', 'Relative path to the file2', ...;
我们不必在路径中的文件名之后包括.scss或.css扩展名。你可以导入任意数量的文件。要了解相对路径本文.
将SCSS文件导入到SCSS文件中:
在这里,我们将_放在.scss文件的名称之前,这告诉SASS编译器该文件不应该单独编译。
优点:
这样做的主要优点是, 我们可以使用@import合并多个文件, 然后编译主文件。因此, 结果是, 我们将只有一个CSS文件, 因此浏览器将不必发出多个HTTP请求来加载不同的CSS文件。
_aside_list.scss
#aside_list {list-style-type : none ;
li {
color : grey;
text-align : center ;
width : 40px ;
height : 80px ;
background-color : lightpink;
// Here &
is parent selector
&
:hover {
background-color : pink;
}
}
}
导入.scss文件时, 可以保留_和.scss扩展名。
input.scss
@import "aside_list";
input.scss的编译文件:output.css
#aside_list {
list-style-type: none;
}#aside_list li {
color: grey;
text-align: center;
width: 40px;
height: 80px;
background-color: lightpink;
}#aside_list li:hover {
background-color: pink;
}
将CSS文件导入SCSS文件:
【SASS @import用法介绍及其示例】导入CSS文件类似于导入.scss文件, 但是你不能包含.css作为CSS文件的扩展名。这样做的主要原因是:CSS还具有@import规则, 该规则具有.css扩展语法。
段落.css
p {
color : red ;
font-size : 20px ;
}
input.scss
@import 'paragraph' ;
input.scss的编译文件:output.css
p {
color: red;
font-size: 20px;
}
推荐阅读
- HTML DOM标题属性用法及其示例
- Java中的StringBuilder类用法及其示例
- PHP MySQL数据库开发介绍和指南
- JavaScript日期getUTCDate()方法用法详解
- PHP如何使用number_format()函数(示例)
- CSS布局(如何实现2D转换(代码示例))
- Amazon SDE-1面试体验| 6个月实习(校园内)
- Java方法重载介绍和用法实例
- 本图文详细教程教你电脑插上耳机没声音怎样处理