Bulma Sass Mixins

Bulma Sass Mixins

Bulma 코드베이스 전반에서 Sass mixin이 CSS 출력을 향상하고 용이하게 만들어요. 이 mixin은 주로 Bulma 내부에서 쓰이지만, 물론 여러분의 프로젝트에서도 재사용할 수 있지요. 요소·CSS·방향 mixin을 하나씩 살펴볼게요.

출처: 문서

본문

Bulma 코드베이스에서는 Sass mixin이 CSS 출력을 향상하고 용이하게 만들어요. 이 mixin은 주로 Bulma 내부에서 사용되지만, 물론 여러분의 프로젝트에서도 재사용할 수 있습니다.

요소 Mixin (Element Mixins)

이 mixin들은 시각적 HTML 요소를 만들어요.

Arrow

arrow() mixin은 아래를 향한 화살표를 만들어요. $color 매개변수는 화살표의 색상을 정의합니다.

.bulma-arrow-mixin {
@include mixins.arrow(purple);
}

Example

HTML

<span class="bulma-arrow-mixin"></span>

Burger

burger() mixin은 정사각형 안에 묶인 16x16px 크기의 3개의 가로 막대를 만들어요. 이 정사각형의 크기는 $dimensions 매개변수로 정의합니다.

.bulma-burger-mixin {
@include mixins.burger(2.5rem);
}

Example

HTML

<button class="bulma-burger-mixin">
<span></span>
<span></span>
<span></span>
<span></span>
</button>

Delete

delete() mixin은 십자가가 포함된 20x20px 원을 만들어요. is-small, is-medium, is-large 3가지 수식어가 함께 제공됩니다.

.bulma-delete-mixin {
@include mixins.delete;
}

Example

HTML

<button class="bulma-delete-mixin is-small"></button>
<button class="bulma-delete-mixin"></button>
<button class="bulma-delete-mixin is-medium"></button>
<button class="bulma-delete-mixin is-large"></button>

Loader

loader() mixin은 1em 크기의 회전하는 원을 만들어요.

.bulma-loader-mixin {
@include mixins.loader;
}

Example

HTML

<span class="bulma-loader-mixin"></span>

Font Awesome 컨테이너 (Font Awesome container)

fa() mixin은 정사각형 inline-block 요소를 만들어요. Font Awesome 아이콘이나 다른 유형의 아이콘 폰트를 담기에 이상적이지요.

첫 번째 $size 매개변수는 아이콘 폰트 크기를 정의합니다. 두 번째 $dimensions 매개변수는 정사각형 컨테이너의 크기를 정의해요.

.bulma-fa-mixin {
@include mixins.fa(1rem, 2rem);
background-color: lavender; // For demo purposes
}

Example

HTML

<span class="bulma-fa-mixin">
<i class="fas fa-thumbs-up"></i>
</span>

CSS Mixin (CSS Mixins)

이 mixin들은 요소에 CSS 규칙을 추가해요.

Block

block() mixin은 요소가 마지막 자식이 아닐 때만 요소 아래에 spacing을 추가합니다. $spacing 매개변수는 margin-bottom의 값을 정의해요.

.bulma-block-mixin {
@include mixins.block(1rem);
}

Example

This element has a margin-bottom. / This element too. / Not this one because it's the last child.

HTML

<p class="bulma-block-mixin">This element has a margin-bottom.</p>
<p class="bulma-block-mixin">This element too.</p>
<p class="bulma-block-mixin">Not this one because it's the last child.</p>

Overlay

overlay() mixin은 요소가 가장 가까운 positioned 조상을 덮도록 만들어요. $offset 매개변수는 요소가 각 가장자리(위, 아래, 왼쪽, 오른쪽)에서 얼마나 안쪽에 위치하는지 정의합니다.

.bulma-overlay-mixin {
@include mixins.overlay(1.5rem);
background-color: darkorange;
border-radius: 0.25em;
color: white;
opacity: 0.9;
padding: 1em;
}

Example

Overlay element

HTML

<div class="bulma-overlay-mixin-parent">
<div class="bulma-overlay-mixin">Overlay element</div>
</div>

Center

center() mixin은 고정 크기의 요소를 가장 가까운 positioned 조상의 중앙에 절대 배치할 수 있게 해줘요. $width 매개변수의 값은 mixin이 적용되는 요소의 너비여야 해요. 요소의 크기가 정사각형이 아니라면 두 번째 매개변수 $height가 필요하며, 그 값은 mixin이 적용되는 요소의 높이가 되어야 합니다.

.bulma-center-mixin {
@include mixins.center;
}

Example

HTML

<div class="bulma-center-mixin-parent">
<img class="bulma-center-mixin" height="96" width="96" src="/assets/images/unsplash/mEZ3PoFGs_k.jpg">
</div>

Placeholder

placeholder() mixin은 input의 placeholder 스타일을 바꿀 수 있게 해줘요. $offset 매개변수는 요소가 각 가장자리에서 얼마나 안쪽에 위치하는지 정의합니다.

.bulma-placeholder-mixin {
@include mixins.placeholder {
color: lightblue;
}
}

Example

HTML

<input
class="input bulma-placeholder-mixin"
type="text"
placeholder="I am a styled placeholder"
>

Clearfix

clearfix() mixin은 clear: both 규칙을 가진 ::after 의사 요소를 추가해요.

.bulma-clearfix-mixin {
@include mixins.clearfix;
}

Example

This is a short image description. / This text is following the clearfix element and is correctly placed after.

HTML

<div class="bulma-clearfix-mixin">
<img height="80" width="80" style="float: left;" src="/assets/images/unsplash/La2kOu2dmH4.jpg">
<p>This is a short image description.</p>
</div>

<p>This text is following the clearfix element and is correctly placed after.</p>

Reset

reset() mixin은 부드러운 스타일 리셋을 적용해요. 특히 <button> 요소에 유용합니다.

.bulma-reset-mixin {
@include mixins.reset;
}

Example

Default button / Reset button

HTML

<button>Default button</button>
<button class="bulma-reset-mixin">Reset button</button>

Unselectable

unselectable() mixin은 요소를 선택 불가능하게 만들어요. 더블클릭 시 텍스트가 선택되지 않도록 방지하기 위한 거예요.

.bulma-unselectable-mixin {
@include mixins.unselectable;
}

Example

This text is selectable. / This text is not selectable.

HTML

<p>This text is selectable.</p>
<p class="bulma-unselectable-mixin">This text is not selectable.</p>

Overflow Touch

overflow-touch() mixin은 요소에 -webkit-overflow-scrolling: touch; 규칙을 추가해요.

방향 Mixin (Direction Mixins)

좌에서 우, 우에서 좌 Mixin (Left-to-right and Right-to-left Mixins)

Bulma에는 전역 $rtl 플래그가 있어서 프레임워크가 우에서 좌(Right-to-left) 버전의 CSS를 출력할 수 있어요. 기본적으로 이 플래그의 값은 false로 설정되어 있어, 프레임워크는 좌에서 우(Left-to-right) 버전을 출력합니다.

@mixin ltr와 @mixin rtl은 $rtl 값에 따라 CSS 규칙을 출력합니다:

• $rtl: true이면 @include mixins.ltr은 아무것도 출력하지 않아요
• $rtl: false이면 @include mixins.rtl은 아무것도 출력하지 않아요

이는 요소의 측면(side)에 특화된 속성에 특히 유용합니다.

.bulma-ltr-rtl-mixin {
background-color: lightgreen;
padding: 0.5em 1em;
border: 1px solid seagreen;
margin-right: -1px;

&:first-child {
@include mixins.ltr {
border-bottom-left-radius: 0.5em;
border-top-left-radius: 0.5em;
}

@include mixins.rtl {
border-bottom-right-radius: 0.5em;
border-top-right-radius: 0.5em;
}
}

&:last-child {
@include mixins.ltr {
border-bottom-right-radius: 0.5em;
border-top-right-radius: 0.5em;
}

@include mixins.rtl {
border-bottom-left-radius: 0.5em;
border-top-left-radius: 0.5em;
}
}
}

Example

One / Two / Three

HTML

<div style="display: flex;">
<span class="bulma-ltr-rtl-mixin">One</span>
<span class="bulma-ltr-rtl-mixin">Two</span>
<span class="bulma-ltr-rtl-mixin">Three</span>
</div>

LTR Position

ltr-position() mixin은 positioned 요소를 다룰 때 left와 right CSS 속성을 빠르게 전환하는 방법이에요. 첫 번째 $spacing 매개변수는 오프셋 값(오른쪽이든 왼쪽이든)을 정의하고, 두 번째 $right 매개변수는 속성이 right(기본값)인지 left인지 정의합니다.

$spacing 매개변수를 1rem으로 설정했을 때의 출력은 다음과 같아요.

Flag →	$rtl: false;	$rtl: true;
@include mixins.ltr-position(1rem, true)	right: 1rem	left: 1rem
@include mixins.ltr-position(1rem, false)	left: 1rem	right: 1rem

Sass source

.bulma-ltr-position-mixin {
@include mixins.ltr-position(1rem, false);
border-radius: 0.25em;
position: absolute;
top: 1rem;
}

CSS output

.bulma-ltr-position-mixin {
left: 1rem;
border-radius: 0.25em;
position: absolute;
top: 1rem;
}

Example

HTML

<div class="bulma-ltr-position-mixin-parent">
<img class="bulma-ltr-position-mixin" height="48" width="48" src="/assets/images/unsplash/iFgRcqHznqg.jpg">
<p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
</div>

LTR Property

ltr-property() mixin은 ltr-position() mixin과 비슷하지만 어떤 CSS 속성을 설정할지 선택할 수 있어요. 이 mixin은 해당 속성에 -right 또는 -left를 붙입니다. 특히 margin과 padding에 유용하지요.

첫 번째 $property 매개변수는 좌우로 "뒤집을" 속성을 지정해요. 두 번째 $spacing 매개변수는 오프셋 값(오른쪽이든 왼쪽이든)을 정의하고, 세 번째 $right 매개변수는 속성이 right(기본값)인지 left인지 정의합니다.

$spacing 매개변수를 1rem으로 설정했을 때의 출력은 다음과 같아요.

Flag →	$rtl: false;	$rtl: true;
@include mixins.ltr-property("margin", 1rem, true)	margin-right: 1rem	margin-left: 1rem
@include mixins.ltr-property("margin", 1rem, false)	margin-left: 1rem	margin-right: 1rem

Sass source

.bulma-ltr-property-mixin {
@include mixins.ltr-property("margin", 1rem, false);
border-radius: 0.25em;
}

CSS output

.bulma-ltr-property-mixin {
margin-left: 1rem;
border-radius: 0.25em;
}

Example

HTML

<div class="bulma-ltr-property-mixin-parent">
<p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
<img class="bulma-ltr-property-mixin" height="96" width="96" src="/assets/images/unsplash/jTSf1xnsoCs.jpg">
</div>

더 알아보기 (Learn more)

• Bulma Sass Responsive Mixins
• Bulma Sass Extends