角度组件的Sass结构

我们的团队正在开发一个基于角度的大型项目，我们正在为不同的控件（导航，输入，textarea，表格，按钮等）创建小型独立组件，以便它们可以在不同的项目。角度组件的Sass结构

在这种情况下我们不确定如何组织样式表（我们现在使用sass编译为一个css文件）。如果所有组件都需要独立并拥有自己的单独sass文件，那么我们将如何使用来自不同供应商css-s的样式（例如，我们使用MDL）来组织css继承之类的东西。

如果我们编写一个特定组件只在其自己的SASS文件中使用的所有CSS，我们将在不同的组件中有很多重复样式。这种情况是否有共同的解决方案？

非常感谢您分享您的建议！

2016-09-20 Asya Kostanyan

在我来说，我其实做写独立的样式表，但我将诸如函数，混入和变量之类的东西导入到独立文件中。这样，每个组件都不依赖于其他组件，这对我来说是最好的方式，因为那样它们也可以在其他项目中重用。 – Chrillewoodz

在我正在开发的一个项目中，我们一直在使用单独的样式表作为组件，同时还有常用样式表用于应用程序中的常用元素。

- app 
    - assets 
     - css 
      main.scss 
      buttons.scss 
      forms.scss 
      grid.scss 
      typography.scss 
     - images 
     - fonts 
    - components 
     - component-a 
      component-a.ts 
      component-a.scss 
     - component-b 
      component-b.ts 
      component-b.scss

您的组件SASS在此实例中应该只包含SASS组件。

这将是值得的（如果你还没有的话）在角2

来源

2016-09-20 08:53:14 itsphilz

这也是我的工作方式，你可以为表单元素创建一个文件，例如字体大小，颜色等。 – Chrillewoodz

谢谢。在这种情况下，如果我想在组件的SASS中使用一些样式，我应该在其中导入一般的CSS，例如，扩展我想要重用的样式，对吧？在这种情况下，我不会在组件的SASS中包含一些不必要的样式吗？这被认为是最佳做法？另外，如果我在不同的组件中导入一些常规样式，我将在页面的最终编译的CSS内部有很多相同样式的重复，对不对？有没有办法避免这种情况？谢谢。 –

您的组件SASS应该只适用于*该组件*。如果你的组件需要改变风格，那么我会在你的组件中创建配置类。 .component {color：white; } .component - red {color：red; } – itsphilz

上Component Styles读了我会建议分拆成SCSS向部分。

变量定义，功能和混入（一切，这是可重复使用）
所有样式是全球性的。如字体大小，形式，风格，电网等可以封装成组件

这种方式可以提供针对应用一个全局样式表和封装组件特定风格

组件特定的风格。通过分离可重用的所有内容（变量，函数和混合类型），您可以以仅用于组件中包含的组件scss的样式使用它。

来源

2016-09-21 14:57:57 DaSch

谢谢。但是，正如我在上面的注释中提到的那样，如果我导入全局样式以将其一部分扩展到组件的SASS文件中，我不会在组件的内部包含某些我不需要的样式吗？另外，在最终编译的CSS中，如果我在不同的组件中导入相同的全局样式，是不是会有重复的样式定义？ –

我会重复样式。但是，组件中加载的样式只会影响组件内的html。因此，您可以封装特定于组件的样式，并确保它不会更改其他组件的样式。在构建过程中，您可以将这些样式添加到组件包中。当使用延迟加载时，可以使用较小的全局样式，并将组件特定的部件移至组件，并只在需要时与组件一起加载此样式。 – DaSch

感谢您分享您的建议。 –

根据您的意见和研究，以下是我们在款式组织方面就项目（我们也使用MDL）的结构：

 
- app 
    - assets 
     - css 
      reset.scss 
      helpers.scss (some global styles) 
      mdl.scss (native MDL styles) 
      variables.scss (global variables) 
    - components 
     - component-a 
      component-a.scss (will import component-a-variables.scss here) 
      component-a-variables.scss (variables used only for this component) 
     - component-b 
      component-b.ts 
      component-b.scss (will import component-b-variables.scss here) 
      component-b-variables.scss (variables used only for this component)

来源

2016-09-23 08:54:47

嗨。如果'component-b-variables.scss'只用在'component-b.scss'中，那么为什么它们在一个单独的文件中？它们没有被重用，所以我不认为有必要打开第二个文件来改变局部变量。这就像在一个单独的文件中使用TypeScript Class属性，然后导入它们一样 – Ryan

角度组件的Sass结构

回答

相关问题