Bulma-functions-mixins

提供:Dev Guides
移動先:案内検索

Bulma-関数とミックスイン

説明

Bulmaは、いくつかの関数とミックスインを使用して、それぞれ色の値とカスタム要素を定義します。 Bulmaには値と色を指定するための3種類のカスタム関数があります-

S.No. Function Description
1 powerNumber($number, $exp) It sends back the number value by evaluating value of exposed number to another one.
2 colorLuminance($color) It specifies the element color, either as dark or light between 0 and 1. The number ⇐ 0.5 defines dark color and > 0.5 defines light color.
3 findColorInvert($color) It defines 70% transparent as black or 100% as opaque white, based on the luminance (brightness) of the color.

ミックスイン

次の表は、ブルマで使用できるミックスインのさまざまなタイプを示しています-

S.No. Mixin Description
1 =arrow($color) It specifies down arrow, which can be used for selecting dropdown.
2 =block It is used for block elements and specifies the margin-bottom of 1.5rem.
3 =clearfix It clears floated content within container and can be added at the end of an element.
4 =center($size) It specifies the position of an element as center and often used for the spinner in a loading button.
5 =delete It is used for deleting an element in modals, messages, tags etc.
6 =fa($size, $dimensions) It defines style of Font Awesome icon container.
7 =hamburger($dimensions) It is used for navbar toggling by creating the menu with 3 bars.
8 =loader It defines the loading spinner for input and button spinners.
9 =overflow-touch It sets the scrolling on iOS devices, when there is an overflow of content in the container.
10 =overlay($offset: 0) It creates an overlay effect of an element by making the background transparent.
11 =placeholder It defines style of an input placeholder.
12 =unselectable It makes the buttons unselectable when clicking.