avatar
Sass Partials

当使用 Sass 的 partials 时,可以将 CSS 代码分割为小的片段,并在其他 Sass 文件中引用它们。这有助于模块化 CSS 并使其更易于维护

partial 文件是以下划线开头命名的 Sass 文件,例如 _partial.scss。下划线告诉 Sass 该文件仅为部分文件,不应该生成为 CSS 文件。在 Sass 中,partial 文件使用 @use 规则进行引用

 

// _buttons.scss

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f1f1f1;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}
// main.scss

@use 'buttons';

.header {
  button {
    @extend .button;
    margin-right: 10px;
  }
}

.footer {
  a {
    @extend .button;
  }
}

 

生成后的 Css 文件

.button, .header button, .footer a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f1f1f1;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}

.header button {
  margin-right: 10px;
}

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