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. |