当使用 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 */