Bootstrap CSS değişkenleri
Örneğin, yaygın <body>
stilleri için şu :root
CSS değişkenlerini göz önünde bulundurun:
@if $font-size-root != null { --#{$variable-prefix}root-font-size: #{$font-size-root}; } --#{$variable-prefix}body-font-family: #{$font-family-base}; --#{$variable-prefix}body-font-size: #{$font-size-base}; --#{$variable-prefix}body-font-weight: #{$font-weight-base}; --#{$variable-prefix}body-line-height: #{$line-height-base}; --#{$variable-prefix}body-color: #{$body-color}; @if $body-text-align != null { --#{$variable-prefix}body-text-align: #{$body-text-align}; } --#{$variable-prefix}body-bg: #{$body-bg};
Pratikte, bu değişkenler Reboot'ta şu şekilde uygulanır:
body { margin: 0; // 1 font-family: var(--#{$variable-prefix}body-font-family); @include font-size(var(--#{$variable-prefix}body-font-size)); font-weight: var(--#{$variable-prefix}body-font-weight); line-height: var(--#{$variable-prefix}body-line-height); color: var(--#{$variable-prefix}body-color); text-align: var(--#{$variable-prefix}body-text-align); background-color: var(--#{$variable-prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 }