scss 角度sass

Posted 2021-05-17

@import "./assets/styles/theme";

@font-face {
  font-family: 'Roboto';
  src: url("./assets/fonts/RobotoRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url("./assets/fonts/RobotoSlabRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

html {
  font-family: 'Roboto', "Helvetica Neue", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fafafa;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0;
  font-weight: 100;
  color: mat-color($primary);;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.35em;
}

h4 {
  font-size: 1.2em;
}

p {
  margin-bottom: 0.75em;
  font-family: 'Roboto Slab', 'Times New Roman', Times, serif;
  color: #666;
  text-align: justify;
  line-height: 1.4em;
}

/* https://www.materialui.co/colors */

/* @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; */
/* @import '~@angular/material/prebuilt-themes/indigo-pink.css'; */
/* @import '~@angular/material/prebuilt-themes/pink-bluegrey.css'; */
/* @import '~@angular/material/prebuilt-themes/purple-green.css'; */

/* Customizing theme */
@import '~@angular/material/theming';
@include mat-core();

/* Color */
$primary: mat-palette($mat-grey, 900);
$accent: mat-palette($mat-teal, 700);
$warn: mat-palette($mat-red, 900);
$app-theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($app-theme);

/* Export */
@mixin app-class($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
}
@include app-class($app-theme);

/* Classes */
.primary{background-color:mat-color($primary);}
.primary-text{color:mat-color($primary);}
.accent{background-color:mat-color($accent);}
.accent-text{color:mat-color($accent);}
.warn{background-color:mat-color($warn);}
.warn-text{color:mat-color($warn);}