Angular 的实用 css 框架/库 - Angular Material - Flex Layout 项目答案

【问题标题】：Utility css framework/library for Angular - Angular Material - Flex Layout projectAngular 的实用 css 框架/库 - Angular Material - Flex Layout 项目
【发布时间】：2020-11-06 15:00:50
【问题描述】：

我正在使用 Angular 9/10 开发一个应用程序，并且我正在使用 Angular Material 和 Flex Layout。我正在使用 Bootstrap 4 进行其他项目，我真的很喜欢有用的 css 类，如 mt-x、pt-x 等。是否有包含此类有用类的库或框架可以与 Flex Layout 和 Angular Material 一起使用？

【问题讨论】：

标签： css angular angular-material angular-flex-layout

【解决方案1】：

您可以使用简单的 SCSS 函数和变量创建自己有用的 CSS 类，如下所示：

// space generation variables
$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45,
  50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // all positions 

@each $space in $spaceamounts {
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

@each $space in $spaceamounts {
  .m-#{$space} {
    margin: #{$space}px !important;
  }

  .p-#{$space} {
    padding: #{$space}px !important;
  }
}

这是我们在 Angular 9 Flex 项目中用来获取边距和内边距类的方法。

【讨论】：

这太棒了！