Bulma Sass Responsive Mixins

Bulma Sass Responsive Mixins

Bulma는 기본적으로 반응형이에요. CSS 미디어 쿼리를 다루는 from()과 until() mixin, 그리고 이름 붙은 11개의 반응형 mixin을 소개할게요. 브레이크포인트를 자유자재로 다룰 수 있게 됩니다.

출처: 문서

본문

Bulma는 기본적으로 반응형이에요. CSS의 반응형은 미디어 쿼리(media queries)에 기반합니다.

Bulma는 2개의 유용한 반응형 mixin을 제공해요.

• @mixin from($breakpoint) — 브레이크포인트보다 크거나 같은 화면을 대상으로 해요
• @mixin until($breakpoint) — 브레이크포인트보다 좁은 화면을 대상으로 해요

사용법은 아주 간단합니다.

from()

from() mixin은 단일 매개변수를 가지며, 해당 스타일이 적용될 시작 화면 너비를 설정해요.

Sass source

@use "bulma/sass/utilities/mixins";

.my-element {
background: red;

@include mixins.from(1280px) {
background: blue;
}
}

CSS output

.my-element {
background: red;
}

@media screen and (min-width: 1280px) {
.my-element {
background: blue;
}
}

너비가 1279px 이하인 화면에서는 요소의 배경이 빨간색이에요. 1280px 이상인 화면에서는 배경이 파란색입니다.

until()

until() mixin은 단일 매개변수를 가지며, 해당 스타일이 적용될 종료 화면 너비(마이너스 1px) 를 설정해요. 즉 1280px 값을 설정하면 스타일은 너비 1279px에서는 적용되지만 1280px에서는 적용되지 않습니다.

이 1px 오프셋을 두는 이유는 from()과 until()을 같은 브레이크포인트 값으로 사용할 수 있게 하기 위함이에요. 이렇게 하면 두 규칙 집합 사이에 틈(gap)이 생기지 않습니다.

Sass source

@use "bulma/sass/utilities/mixins";

$breakpoint: 1280px;

.my-element {
@include mixins.until($breakpoint) {
background: green;
}

@include mixins.from($breakpoint) {
background: orange;
}
}

CSS output

@media screen and (max-width: 1279px) {
.my-element {
background: green;
}
}

@media screen and (min-width: 1280px) {
.my-element {
background: orange;
}
}

너비가 1279px 이하인 화면에서는 요소 배경이 초록색, 1280px 이상인 화면에서는 주황색이에요.

이름 붙은 Mixin (Named mixins)

4개의 브레이크포인트와 5개의 화면 크기를 지원함으로써 Bulma는 아주 다양한 구성을 지원할 수 있어요. @include mixins.from()과 @include mixins.until()를 직접 사용할 수도 있지만, Bulma는 11개의 이름 붙은 mixin이라는 빠른 단축키를 제공합니다.

이 반응형 mixin들은 Bulma에서 사용하는 화면 크기와 브레이크포인트의 이름을 따서 지어졌어요.

mobile — $tablet 미만에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.mobile {
// Styles applied
// below $tablet
}

tablet — $tablet 이상에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.tablet {
// Styles applied
// above $tablet
}

desktop — $desktop 이상에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.desktop {
// Styles applied
// above $desktop
}

widescreen — $widescreen 이상에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.widescreen {
// Styles applied
// above $widescreen
}

fullhd — $fullhd 이상에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.fullhd {
// Styles applied
// above $fullhd
}

tablet-only — $tablet와 $desktop 사이에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.tablet-only {
// Styles applied
// between $tablet
// and $desktop
}

desktop-only — $desktop와 $widescreen 사이에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.desktop-only {
// Styles applied
// between $desktop
// and $widescreen
}

widescreen-only — $widescreen와 $fullhd 사이에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.widescreen-only {
// Styles applied
// between $widescreen
// and $fullhd
}

touch — $desktop 미만에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.touch {
// Styles applied
// below $desktop
}

until-widescreen — $widescreen 미만에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.until-widescreen {
// Styles applied
// below $widescreen
}

until-fullhd — $fullhd 미만에서 적용:

@use "bulma/sass/utilities/mixins";

@include mixins.until {
// Styles applied
// below $fullhd
}

더 알아보기 (Learn more)

• Bulma Sass Mixins
• Bulma 반응형 (Responsiveness)