# Mixins

# Breakpoint

@use "~bruut-sass" as bruut;

.element {
	font-size: 20px;
	
	@include bruut.breakpoint($breakpoint-width, $type) {
		font-size: 16px;
	}	
}

The $breakpoint-width accepts a key of the $breakpoints sass map or a valid media-query value (rem based). The $type can be used to create a min-width or max-width query (use min or max as values).

# Color

@use "~bruut-sass" as bruut;

.element {
	@include bruut.color(background-color, alpha-100);
}

// output
.element {
	background-color: #ffa822;
	background-color: var(--color-alpha-100);
}

The color mixin will output a hex value and the var(--color-name) for the property you set as first argument.

# Viewport-sizer

@use "~bruut-sass" as bruut;

.element {
	@include bruut.viewport-sizer(font-size, 3rem, 1.25rem);
}

// output
.element {
	font-size: 3rem;
	
	@media screen...
}

The viewport sizer outputs a max and min value that you specify for the property you set as first argument. Between the min and max breakpoints for the viewport-sizer, the mixin will output a calculated value between the max and min value with the viewport size taken into account. The property accepts a Sass List as well:

@use "~bruut-sass" as bruut;

.element {
	@include bruut.viewport-sizer( (padding-left, padding-right), 3rem, 1.25rem);
}

# Text-size

@use "~bruut-sass" as bruut;

.element {
	@include bruut.text-size(1);
}

The text-size mixin outputs the viewport-sized font-size for a specific $text size. You can use a size from 0 through 12.