sass的模块化@import

2019-09-26  本文已影响0人  最爱喝龙井

sass提供了一种导入的方式@import,但是它有优化了这个方式,他把每一个模块成为一个partials,每个partials的文件名必须以下划线开头,这样就不会自动编译这个sass文件了,我们在一个文件当中统一导入这些partials,这样就相当于打包了css文件,😱流弊~~

例:

首先我们定义一个_common.scss文件,内容如下:

* {
  padding: 0;
  margin: 0;
}

这时我们会发现,并没有自动编译这个sass文件,接着,我们在style.scss文件当中引入这个_common.scss文件,这里不需要加下划线和后缀名

@import "common";
body {
    padding: 15px;
}
body a {
    font-weight: 600;
}
div {
    @extend body;
    color: #ccc;
}

编译之后的style.css文件

* {
  padding: 0;
  margin: 0;
}

body, div {
  padding: 15px;
}

body a, div a {
  font-weight: 600;
}

div {
  color: #ccc;
}
上一篇下一篇

猜你喜欢

热点阅读