[英]Angular 6 define global scss heading styles - Bootstrap
I am trying to overwrite and define global heading styles for my Angular 6 application. 我正在尝试为Angular 6应用程序覆盖和定义全局标题样式。 If I do something like this in the styles.scss file, it works!
如果我在styles.scss文件中做类似的事情,那就行得通!
$h1-font-size: 50px;
but when I try to define $h1-font-size based on a screen size(media queries) it doesn't show the right font size, I have something like this ATM: 但是当我尝试根据屏幕大小(媒体查询)定义$ h1-font-size时,它没有显示正确的字体大小,我有类似以下的ATM:
// screen size breakpoints //屏幕尺寸断点
$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: 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 file: scss file 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 file: 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;
}
Is it even possible? 可能吗 What's the best practice to overwrite boostrap-scss headings based on the screen size?
根据屏幕尺寸覆盖boostrap-scss标题的最佳实践是什么?
Link to the stackblitz example - https://stackblitz.com/edit/angular-scss-global-headings 链接到stackblitz例子- https://stackblitz.com/edit/angular-scss-global-headings
The problem is that you assign a new vlaue to a variable depends on screen size but you never use it. 问题是您将新的vlaue分配给变量取决于屏幕大小,但您从未使用过它。 Just select h1 and set a value.
只需选择h1并设置一个值即可。 It worked with your stackblitz example
它与您的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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.