Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_rfs.scss 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. // stylelint-disable property-blacklist, scss/dollar-variable-default
  2. // SCSS RFS mixin
  3. //
  4. // Automated font-resizing
  5. //
  6. // See https://github.com/twbs/rfs
  7. // Configuration
  8. // Base font size
  9. $rfs-base-font-size: 1.25rem !default;
  10. $rfs-font-size-unit: rem !default;
  11. // Breakpoint at where font-size starts decreasing if screen width is smaller
  12. $rfs-breakpoint: 1200px !default;
  13. $rfs-breakpoint-unit: px !default;
  14. // Resize font-size based on screen height and width
  15. $rfs-two-dimensional: false !default;
  16. // Factor of decrease
  17. $rfs-factor: 10 !default;
  18. @if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
  19. @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
  20. }
  21. // Generate enable or disable classes. Possibilities: false, "enable" or "disable"
  22. $rfs-class: false !default;
  23. // 1 rem = $rfs-rem-value px
  24. $rfs-rem-value: 16 !default;
  25. // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
  26. $rfs-safari-iframe-resize-bug-fix: false !default;
  27. // Disable RFS by setting $enable-responsive-font-sizes to false
  28. $enable-responsive-font-sizes: true !default;
  29. // Cache $rfs-base-font-size unit
  30. $rfs-base-font-size-unit: unit($rfs-base-font-size);
  31. // Remove px-unit from $rfs-base-font-size for calculations
  32. @if $rfs-base-font-size-unit == "px" {
  33. $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
  34. }
  35. @else if $rfs-base-font-size-unit == "rem" {
  36. $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
  37. }
  38. // Cache $rfs-breakpoint unit to prevent multiple calls
  39. $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
  40. // Remove unit from $rfs-breakpoint for calculations
  41. @if $rfs-breakpoint-unit-cache == "px" {
  42. $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
  43. }
  44. @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
  45. $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
  46. }
  47. // Responsive font-size mixin
  48. @mixin rfs($fs, $important: false) {
  49. // Cache $fs unit
  50. $fs-unit: if(type-of($fs) == "number", unit($fs), false);
  51. // Add !important suffix if needed
  52. $rfs-suffix: if($important, " !important", "");
  53. // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
  54. @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
  55. font-size: #{$fs}#{$rfs-suffix};
  56. }
  57. @else {
  58. // Variables for storing static and fluid rescaling
  59. $rfs-static: null;
  60. $rfs-fluid: null;
  61. // Remove px-unit from $fs for calculations
  62. @if $fs-unit == "px" {
  63. $fs: $fs / ($fs * 0 + 1);
  64. }
  65. @else if $fs-unit == "rem" {
  66. $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
  67. }
  68. // Set default font-size
  69. @if $rfs-font-size-unit == rem {
  70. $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
  71. }
  72. @else if $rfs-font-size-unit == px {
  73. $rfs-static: #{$fs}px#{$rfs-suffix};
  74. }
  75. @else {
  76. @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
  77. }
  78. // Only add media query if font-size is bigger as the minimum font-size
  79. // If $rfs-factor == 1, no rescaling will take place
  80. @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
  81. $min-width: null;
  82. $variable-unit: null;
  83. // Calculate minimum font-size for given font-size
  84. $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
  85. // Calculate difference between given font-size and minimum font-size for given font-size
  86. $fs-diff: $fs - $fs-min;
  87. // Base font-size formatting
  88. // No need to check if the unit is valid, because we did that before
  89. $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
  90. // If two-dimensional, use smallest of screen width and height
  91. $variable-unit: if($rfs-two-dimensional, vmin, vw);
  92. // Calculate the variable width between 0 and $rfs-breakpoint
  93. $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
  94. // Set the calculated font-size.
  95. $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
  96. }
  97. // Rendering
  98. @if $rfs-fluid == null {
  99. // Only render static font-size if no fluid font-size is available
  100. font-size: $rfs-static;
  101. }
  102. @else {
  103. $mq-value: null;
  104. // RFS breakpoint formatting
  105. @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
  106. $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
  107. }
  108. @else if $rfs-breakpoint-unit == px {
  109. $mq-value: #{$rfs-breakpoint}px;
  110. }
  111. @else {
  112. @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
  113. }
  114. @if $rfs-class == "disable" {
  115. // Adding an extra class increases specificity,
  116. // which prevents the media query to override the font size
  117. &,
  118. .disable-responsive-font-size &,
  119. &.disable-responsive-font-size {
  120. font-size: $rfs-static;
  121. }
  122. }
  123. @else {
  124. font-size: $rfs-static;
  125. }
  126. @if $rfs-two-dimensional {
  127. @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
  128. @if $rfs-class == "enable" {
  129. .enable-responsive-font-size &,
  130. &.enable-responsive-font-size {
  131. font-size: $rfs-fluid;
  132. }
  133. }
  134. @else {
  135. font-size: $rfs-fluid;
  136. }
  137. @if $rfs-safari-iframe-resize-bug-fix {
  138. // stylelint-disable-next-line length-zero-no-unit
  139. min-width: 0vw;
  140. }
  141. }
  142. }
  143. @else {
  144. @media (max-width: #{$mq-value}) {
  145. @if $rfs-class == "enable" {
  146. .enable-responsive-font-size &,
  147. &.enable-responsive-font-size {
  148. font-size: $rfs-fluid;
  149. }
  150. }
  151. @else {
  152. font-size: $rfs-fluid;
  153. }
  154. @if $rfs-safari-iframe-resize-bug-fix {
  155. // stylelint-disable-next-line length-zero-no-unit
  156. min-width: 0vw;
  157. }
  158. }
  159. }
  160. }
  161. }
  162. }
  163. // The font-size & responsive-font-size mixin uses RFS to rescale font sizes
  164. @mixin font-size($fs, $important: false) {
  165. @include rfs($fs, $important);
  166. }
  167. @mixin responsive-font-size($fs, $important: false) {
  168. @include rfs($fs, $important);
  169. }