SASS @import用法介绍及其示例

2021年3月24日14:57:44 发表评论 1,395 次浏览

使用@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文件:

导入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;
}

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: