Angular 6 определяет глобальные стили заголовка scss - Bootstrap - PullRequest
Новая
       36

Angular 6 определяет глобальные стили заголовка scss - Bootstrap

0 голосов
/ 20 октября 2018

Я пытаюсь переписать и определить глобальные стили заголовка для моего приложения Angular 6.Если я делаю что-то подобное в файле styles.scss , это работает! 

$h1-font-size: 50px;

, но когда я пытаюсь определить $ h1-font-size на основе размера экрана (медиазапрашивает) он не показывает правильный размер шрифта, у меня есть что-то вроде этого банкомата:

// точки останова размера экрана 

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

// media queries xs, md and lg
@media only screen and (min-width: map-get($grid-breakpoints, xs)) {
    $h1-font-size: 12px;
}

@media only screen and (min-width: map-get($grid-breakpoints, md)) {
    $h1-font-size: 18px;
}

@media only screen and (min-width: map-get($grid-breakpoints, lg)) {
    $h1-font-size: 50px;
}

angular.json: 

  "styles": [
              "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
              "node_modules/bootstrap/dist/css/bootstrap-grid.css",
              "src/styles.scss",
              ...
            ],

файл bootstrap-scss._variables.scss: файл scss 

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;

файл styles.scss: 

/* You can add global styles to this file, and also import other style files */

@import '~bootstrap/scss/bootstrap-reboot';
@import '~bootstrap/scss/bootstrap-grid';
// Required
@import "~node_modules/bootstrap/scss/bootstrap";

/* Set global default font family */
$font-family-base: 'Source Sans Pro',
sans-serif;
body,
html {
    font-family: $font-family-base
}

$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
@media only screen and (min-width: map-get($grid-breakpoints, xs)) {
    $h1-font-size: 12px;
}

@media only screen and (min-width: map-get($grid-breakpoints, md)) {
    $h1-font-size: 12px;
}

@media only screen and (min-width: map-get($grid-breakpoints, lg)) {
    $h1-font-size: 50px;
}

Возможно ли это вообще?Как лучше перезаписывать заголовки boostrap-scss в зависимости от размера экрана?

Ссылка на пример стекаблица - https://stackblitz.com/edit/angular-scss-global-headings

1 Ответ

0 голосов
/ 20 октября 2018

Проблема в том, что вы назначаете новое значение переменной, зависит от размера экрана, но никогда не используете его.Просто выберите h1 и установите значение.Это сработало на вашем примере с stackblitz 

@media only screen and (min-width: map-get($grid-breakpoints, xs)) {
    $h1-font-size: 10px;
    h1 {
      font-size: $h1-font-size
      }
}

@media only screen and (min-width: map-get($grid-breakpoints, md)) {
    $h1-font-size: 30px;
    h1 {
      font-size: $h1-font-size
      }
}

@media only screen and (min-width: map-get($grid-breakpoints, lg)) {
    $h1-font-size: 50px;
    h1 {
      font-size: $h1-font-size
      } 
}
...