متغیرها

ببینید چطور Bulma از متغیرهای Sass استفاده می کند تا به راحتی شخصی سازی شود

Bulma دارای دو فایل متغیر است که به 4 بخش تقسیم می شود:

  1. متغیرهای اولیه: جایی که متغیرها را با مقدار واقعی تعریف می کنید، مانند:
    • colors: $blue: hsl(217, 71%, 53%)
    • font sizes: $size-1: 3rem
    • dimensions: $gap: 32px
    • other values: $easing: ease-out or $radius-large: 6px
  2. متغیرهای مشتق شده متغیرهایی هستند که از مقادیر تنظیم شده در فایل قبلی محاسبه می شوند. به عنوان مثال ، می توانید:
    • Primary colors حاصل از متغیرهای اولیه:
      • $primary: $turquoise
      • $link: $blue
      • $info: $cyan
      • $success: $green
      • $warning: $yellow
      • $danger: $red
      • $dark: $grey-darker
      • $text: $grey-dark
    • $background: $white-ter: یک رنگ پس زمینه عمومی
    • $link: $blue: لینک ها از primary color استفاده می کنند
    • $family-primary: $family-sans-serif: font family اصلی sans-serif است
    • لیست ها و نقشه هایی که مجموعه ای از متغیرهای از قبل تعریف شده هستند:
      • $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
      • $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades)
      • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

برای نادیده گرفتن هر یک از این متغیرها, آنها را قبل از وارد کردن Bulma تنظیم کنید.


متغیرهای اولیه #

اینها متغیرهای اولیه با مقدار واقعی هستند.

$black color hsl(0, 0%, 4%)
$black-bis color hsl(0, 0%, 7%)
$black-ter color hsl(0, 0%, 14%)
$grey-darker color hsl(0, 0%, 21%)
$grey-dark color hsl(0, 0%, 29%)
$grey color hsl(0, 0%, 48%)
$grey-light color hsl(0, 0%, 71%)
$grey-lighter color hsl(0, 0%, 86%)
$grey-lightest color hsl(0, 0%, 93%)
$white-ter color hsl(0, 0%, 96%)
$white-bis color hsl(0, 0%, 98%)
$white color hsl(0, 0%, 100%)
$orange color hsl(14, 100%, 53%)
$yellow color hsl(48, 100%, 67%)
$green color hsl(141, 53%, 53%)
$turquoise color hsl(171, 100%, 41%)
$cyan color hsl(204, 71%, 53%)
$blue color hsl(217, 71%, 53%)
$purple color hsl(271, 100%, 71%)
$red color hsl(348, 86%, 61%)
$family-sans-serif font-family BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace font-family monospace
$render-mode keyword optimizeLegibility
$size-1 size 3rem
$size-2 size 2.5rem
$size-3 size 2rem
$size-4 size 1.5rem
$size-5 size 1.25rem
$size-6 size 1rem
$size-7 size 0.75rem
$weight-light font-weight 300
$weight-normal font-weight 400
$weight-medium font-weight 500
$weight-semibold font-weight 600
$weight-bold font-weight 700
$block-spacing size 1.5rem
$gap size 32px
$tablet size 769px
$desktop computed 960px + (2 * $gap)
$widescreen computed 1152px + (2 * $gap)
$widescreen-enabled boolean true
$fullhd computed 1344px + (2 * $gap)
$fullhd-enabled boolean true
$easing keyword ease-out
$radius-small size 2px
$radius size 4px
$radius-large size 6px
$radius-rounded size 290486px
$speed duration 86ms
$variable-columns boolean true
$rtl boolean false

متغیرهای مشتق شده #

اینها متغیرهایی با یک مقدار هستند که به متغیر دیگری ارجاع می دهند.

نام نوع مقدار پبش فرض مقدار محاسبه شده
نام نوع مقدار پبش فرض مقدار محاسبه شده
$primary color $turquoise hsl(171, 100%, 41%)
$info color $cyan hsl(204, 71%, 53%)
$success color $green hsl(141, 53%, 53%)
$warning color $yellow hsl(48, 100%, 67%)
$danger color $red hsl(348, 86%, 61%)
$light color $white-ter hsl(0, 0%, 96%)
$dark color $grey-darker hsl(0, 0%, 21%)
$orange-invert color findColorInvert($orange) #fff
$yellow-invert color findColorInvert($yellow) rgba(0, 0, 0, 0.7)
$green-invert color findColorInvert($green) #fff
$turquoise-invert color findColorInvert($turquoise) #fff
$cyan-invert color findColorInvert($cyan) #fff
$blue-invert color findColorInvert($blue) #fff
$purple-invert color findColorInvert($purple) #fff
$red-invert color findColorInvert($red) #fff
$primary-invert color findColorInvert($primary) #fff
$primary-light compound findLightColor($primary)
$primary-dark compound findDarkColor($primary)
$info-invert color findColorInvert($info) #fff
$info-light compound findLightColor($info)
$info-dark compound findDarkColor($info)
$success-invert color findColorInvert($success) #fff
$success-light compound findLightColor($success)
$success-dark compound findDarkColor($success)
$warning-invert color findColorInvert($warning) #fff
$warning-light compound findLightColor($warning)
$warning-dark compound findDarkColor($warning)
$danger-invert color findColorInvert($danger) #fff
$danger-light compound findLightColor($danger)
$danger-dark compound findDarkColor($danger)
$light-invert color findColorInvert($light) #fff
$dark-invert color findColorInvert($dark) #fff
$scheme-main color $white hsl(0, 0%, 100%)
$scheme-main-bis color $white-bis hsl(0, 0%, 98%)
$scheme-main-ter color $white-ter hsl(0, 0%, 96%)
$scheme-invert color $black hsl(0, 0%, 4%)
$scheme-invert-bis color $black-bis hsl(0, 0%, 7%)
$scheme-invert-ter color $black-ter hsl(0, 0%, 14%)
$background color $white-ter hsl(0, 0%, 96%)
$border color $grey-lighter hsl(0, 0%, 86%)
$border-hover color $grey-light hsl(0, 0%, 71%)
$border-light color $grey-lightest hsl(0, 0%, 93%)
$border-light-hover color $grey-light hsl(0, 0%, 71%)
$text color $grey-dark hsl(0, 0%, 29%)
$text-invert color findColorInvert($text) #fff
$text-light color $grey hsl(0, 0%, 48%)
$text-strong color $grey-darker hsl(0, 0%, 21%)
$code compound darken($red, 15%)
$code-background color $background hsl(0, 0%, 96%)
$pre color $text hsl(0, 0%, 29%)
$pre-background color $background hsl(0, 0%, 96%)
$link color $blue hsl(217, 71%, 53%)
$link-invert color findColorInvert($link) #fff
$link-light compound findLightColor($link)
$link-dark compound findDarkColor($link)
$link-visited color $purple hsl(271, 100%, 71%)
$link-hover color $grey-darker hsl(0, 0%, 21%)
$link-hover-border color $grey-light hsl(0, 0%, 71%)
$link-focus color $grey-darker hsl(0, 0%, 21%)
$link-focus-border color $blue hsl(217, 71%, 53%)
$link-active color $grey-darker hsl(0, 0%, 21%)
$link-active-border color $grey-dark hsl(0, 0%, 29%)
$family-primary font-family $family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-secondary font-family $family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-code font-family $family-monospace monospace
$size-small size $size-7 0.75rem
$size-normal size $size-6 1rem
$size-medium size $size-5 1.25rem
$size-large size $size-4 1.5rem
$custom-colors keyword null
$custom-shades keyword null
$colors function mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
$shades function mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades)
$sizes map $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

متغیرهای عمومی #

برای سفارشی سازی عمومی می توانید از متغیرهای عمومی زیر استفاده کنید. قبل از وارد کردن Bulma ، به سادگی یک یا چند مورد از این متغیرها را تنظیم کنید. یاد بگیرید که چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$body-background-color color $scheme-main hsl(0, 0%, 100%)
$body-size size 16px
$body-min-width size 300px
$body-rendering keyword optimizeLegibility
$body-family font-family $family-primary BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$body-overflow-x string hidden
$body-overflow-y string scroll
$body-color color $text hsl(0, 0%, 29%)
$body-font-size size 1em
$body-weight font-weight $weight-normal 400
$body-line-height unitless 1.5
$code-family font-family $family-code monospace
$code-padding size 0.25em 0.5em 0.25em
$code-weight font-weight normal
$code-size size 0.875em
$small-font-size size 0.875em
$hr-background-color color $background hsl(0, 0%, 96%)
$hr-height size 2px
$hr-margin size 1.5rem 0
$strong-color color $text-strong hsl(0, 0%, 21%)
$strong-weight font-weight $weight-bold 700
$pre-font-size size 0.875em
$pre-padding size 1.25rem 1.5rem
$pre-code-font-size size 1em