糟糕！React 的 Sass 文件夹结构
引言
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
“OhSnap！”系列节目探索了一些您可以立即应用的实用小技巧。
引言
今天我们将一起了解我最近完成的一个React 项目的文件夹结构。
我使用的是node-sass npm 包，并且始终不使用 Bulma 或 Bootstrap 等任何 CSS 框架。
经过一番研究和反复试验，我发现以下方法对我有效。希望它也能对你有所帮助。
文件夹结构
为了清晰起见，以下内容已进行简化，但基本结构保持不变。您可以在这里查看实际的 GitHub 代码库。
/src
• ———— /components
• |———— /NominationContainer
• |———— NominationContainer.js
• |———— nominationContainer.scss <—— (section 2)
•
•
• ———— /sassStyles <—— (section 1)
• |———— _animations.scss
• |———— _functions.scss
• |———— _global.scss
• |———— _mixins.scss
• |———— _typography.scss
• |———— _variables.scss
第一部分
此文件夹位于组件目录之外，包含所有可能影响多个组件的局部视图和样式。正如您将在第 2 节中看到的，各个组件会根据需要从这些局部视图中导入。
• ———— /sassStyles <—— (section 1)
• |———— _animations.scss
• |———— _functions.scss
• |———— _global.scss
• |———— _mixins.scss
• |———— _typography.scss
• |———— _variables.scss
_animations.scss
这个局部视图文件存储了实际的@keyframeCSS 动画。它有助于大幅减小组件样式表的大小。在我们的示例中，该文件存储了 22 个动画，相当于近 800 行代码！这为我们的组件文件节省了大量空间，现在组件文件只需引用此文件即可。
_functions.scss
这个局部视图包含了所有用于处理并返回值的 SASS 函数。我在这个项目中没有使用它们，但你可以在这个StackOverflow 帖子中找到一个很好的示例。
_global.scss
这个局部视图包含会覆盖全局元素（例如 `<div>`#root或 `<span> body` 元素）的样式。在我们的示例中，它还导入了_variable.scss文件以引用颜色。
_mixins.scss
这个局部视图可以容纳任何可重复的代码块。在我们的示例中，我使用 mixin 来确定断点大小。它们还使用了变量，因此如果我的整体lg大小发生变化，所有地方都会更新。
_typography.scss
这个局部视图包含了主要的排版元素样式，例如h1-h6`<style>` 、`<style>` 和全局类或 ID。正如您在示例p中看到的，我倾向于避免在此处应用过于具体的属性，例如颜色。这样，我就可以灵活地在应用程序的不同部分更改它，而无需担心属性的精确性。
_variables.scss
这个局部视图包含可重复使用的属性值，例如品牌颜色和尺寸。通过将值存储#002e25在变量中，$primaryDark2Color我可以将其应用于诸如颜色和尺寸之类的属性color，border同时保留稍后全局更改颜色的选项。
第二部分
.js这是一个包含一个文件及其关联.scss样式文件的独立组件示例。
/src
• ———— /components
• |———— /NominationContainer
• |———— NominationContainer.js
• |———— nominationContainer.scss <—— (section 2)
nominationContainer.scss
这是一个单个组件.scss文件的示例，其代码如下所示。请注意它是如何导入 `<component>` animations、 `<component> variables` 和mixin局部视图的。
因此，动画只需两行代码即可完成设置。颜色基于变量，媒体查询则从 mixin 中提取。
将来，我只需在原始部分文件中更改这些内容，它们就会在这里更新。
@import '../../../sassStyles/variables';
@import '../../../sassStyles/animations';
@import '../../../sassStyles/mixins';
.nom-container {
background: $primaryDark1Color;
height: 100%;
padding: 26px 20px;
margin-top: 15px;
opacity: 0;
-webkit-animation: fade-up 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.4s both;
animation: fade-up 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.4s both;
@include customMinBreakPoint(1024) {
margin-top: 0;
padding: 26px 0 50px 0;
-webkit-animation: fade-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
animation: fade-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
&__counter-wrapper {
display: flex;
justify-content: center;
margin-bottom: 30px;
margin-top: 0;
opacity: 0;
-webkit-animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.6s both;
animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.6s both;
@include customMinBreakPoint(1024) {
justify-content: flex-end;
margin-right: 50px;
margin-bottom: 75px;
-webkit-animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.25s both;
animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.25s both;
}
@include customMinBreakPoint(1400) {
margin-right: 12%;
}
@include customMinBreakPoint(1500) {
margin-right: 15%;
}
}
}
文章来源：https://dev.to/gedalyakrycer/ohsnap-sass-folder-struct-for-react-483e