码迷,mamicode.com
首页 > 其他好文 > 详细

Sass @import

时间:2021-04-24 13:21:16      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:文件   mic   text   body   文件中   sass   microsoft   合并   hover   

Sass @import

顾名思义,表示的是加载其他文件的内容到本文件中

sass中使用该方式加载的时候是直接将两个文件的内容合二为一使用

a.scss文件

div {
   width: 200px; 
   height: 200px;
   background-color: red;
   p {
     color: white;
     font-size: 20px;
     a {
       text-decoration: none;
     }
     &:hover {
       color: blue;
     }
   }
 }

 a{
     font-size:16px;
 } 

b.scss文件中使用@import加载a.scss文件

@import "a";
* {margin: 0;padding: 0;} 
a {text-decoration: none;} 
a{font-family:‘Microsoft YaHei‘}

最后得到的css中包含上面两个sass文件所编辑的所有样式

div {
  width: 200px;
  height: 200px;
  background-color: red;
}
div p {
  color: white;
  font-size: 20px;
}
div p a {
  text-decoration: none;
}
div p:hover {
  color: blue;
}

a {
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

a {
  font-family: "Microsoft YaHei";
}

Sass Partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。

但是,在导入语句中我们不需要添加下划线。

Sass Partials 语法格式:

_filename;

以下实例创建一个 _colors.scss 的文件,但是不会编译成 _colors.css 文件:

//_colors.scss 文件代码:
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

 如果要导入该文件,则不需要使用下划线:

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

转换出的css文件,中使用了_color.scss文件中的变量,但是没有将其合并到文件中

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: #4169E1;
}

/*# sourceMappingURL=b.css.map */

 

Sass @import

标签:文件   mic   text   body   文件中   sass   microsoft   合并   hover   

原文地址:https://www.cnblogs.com/camellioil/p/14694999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!