Mixins

Background #

background

Syntax

background($color)
background($color-map)

This mixin creates a background color or gradient with background-gradient mixin if map is specified as param.

Example

// Color
$color: palette(white)

// Mixin
.item {
    @include background($color);
}

Output

.item {
    background-color: var(--color);
}

Example

// Map
$color: (
    from: palette(white),
    to: palette(neutral, lighter),
    deg: 90deg // optional
);

// Mixin
.item {
    @include background($color);
}

Output

.item {
    background-color: var(--color-from);
    background-image: linear-gradient(
        90deg,
        var(--color-from) 0%,
        var(--color-to) 100%
    );
}

background-gradient

Syntax

background-gradient($color-map, $deg: 180deg)

This mixin creates two-color linear or radial gradient.

Linear Gradient

// Map
$color: (
    from: palette(white),
    to: palette(neutral, lighter)
);

// Mixin
.item {
    @include background-gradient($color);
}

// Specified direction
.item {
    @include background-gradient($color, 90deg);
}

Output

.item {
    background-color: var(--color-from);
    background-image: linear-gradient(
        180deg,
        var(--color-from) 0%,
        var(--color-to) 100%
    );
}

// Specified direction
.item {
    background-color: var(--color-from);
    background-image: linear-gradient(
        90deg,
        var(--color-from) 0%,
        var(--color-to) 100%
    );
}

Radial Gradient

// Map
$color: (
    from: palette(white),
    to: palette(neutral, lighter)
);

// Mixin
.item {
    @include background-gradient($color, radial);
}

Output

.item {
    background-color: var(--color-from);
    background-image: radial-gradient(
        var(--color-from),
        var(--color-to)
    );
}

background-image

Syntax

background-image($file1, $file2, $width: auto, $height: auto)

This mixin sets the image as a background for high resolution screens.

Example

.item {
    @include background-image(photo.jpg, photo-2x.jpg, 800px);
}

Output

.item {
    background-image: url(photo.jpg);

    @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (min--moz-device-pixel-ratio: 2),
      only screen and (min-device-pixel-ratio: 2) {
        background-image: url(photo-2x.jpg);
        background-size: 800px auto;
    }
}

Breakpoint #

for-lg

This mixin defines styles for large screens from 1442px by default.

@include for-lg {
    ... content ...
}

Output

@media only screen and (min-width: 1442px)  {
    ... content ...
}

for-md

This mixin defines styles for medium (tablet) screens up to 1024px by default.

@include for-md {
    ... content ...
}

Output

@media only screen and (max-width: 1023px) {
    ... content ...
}

for-sm

This mixin defines styles for small (mobile) screens up to 768px by default.

@include for-sm {
    ... content ...
}

Output

@media only screen and (max-width: 767px)  {
    ... content ...
}

not-sm

This mixin defines styles for all screens except small (mobile) ones from 768px by default.

@include not-sm {
    ... content ...
}

Output

@media only screen and (min-width: 768px)  {
    ... content ...
}

breakpoint

This mixin defines custom breakpoints.

// min-width 768px;
@include breakpoint($min: 768px) { ... }

// min-width 768px and max-width 1024px;
@include breakpoint(768px, 1024px) { ... }

/ max-width 1024px;
@include breakpoint($max: 1024px) { ... }

Generators #

generate-type

This mixin generates font size modifiers for modules.

@include generate-type(modulename);
@include generate-type(modulename, target);

Let's say $scales has the specified module font size.

// =Scales
$scales: (
    type: (
        my-module: (
            small: 13px,
            default: 15px,
            large: 18px
        )
    )
);

Include the generator mixin.

.my-module {
    @include generate-type(my-module);
}

Output

.my-module {
    font-size: 15px;
}
.my-module-small {
    font-size: 13px;
}
.my-module-large {
    font-size: 18px;
}

Specifying the target argument, sets the nested block to which the font size will be applied.

.my-module {
    @include generate-type(my-module, '.my-module-item');
}

Output

.my-module .my-module-item {
    font-size: 15px;
}
.my-module-small .my-module-item {
    font-size: 13px;
}
.my-module-large .my-module-item {
    font-size: 18px;
}

generate-variants

This mixin generates module modifiers from $colors and $variants maps.

@include generate-variants(prefix, modulename);
@include generate-variants(prefix, modulename, nested);

Let's say we have the specified properties and colors in $variants and $colors.

// =Colors
$colors: (
    my-module: (
        default: (
            color: palette(black),
            background-color: palette(neutral, lightest)
        ),
        primary: (
            color: palette(primary, base),
            background-color: palette(primary, lightest)
        )
    )
);

// =Variants
$variants: (
    default: (
        padding: 4rem
    ),
    large: (
        padding: 8rem
    )
);

Include the generator mixin.

.my-module {
    @include generate-variants('.my-module', my-module);
}

Output

.my-module {
    color: var(--color);
    background-color: var(--color);
    padding: 4rem;
}
.my-module-primary {
    color: var(--color);
    background-color: var(--color);
}
.my-module-large {
    padding: 8rem;
}

By specifying the nested argument, we tell the mixin to generate nested blocks with states.

Here's what states can be:

• base
• hover
• focus
• hoverfocus
• before
• after
• first-child
• last-child
• active
• disabled

// =Colors
$colors: (
    my-module: (
        default: (
            item: (
                background-color: palette(neutral, lightest)
            ),
            link: (
                base: (
                    color: palette(black)
                ),
                hover: (
                    color: palette(negative, base)
                )
            )
        ),
        primary: (
            item: (
                background-color: palette(primary, lightest)
            ),
            link: (
                base: (
                    color: palette(primary, base)
                ),
                hover: (
                    color: palette(primary, base)
                )
            )
        )
    )
);

// =Variants
$variants: (
    default: (
        padding: 4rem
    ),
    large: (
        padding: 8rem
    )
);

Include the generator mixin with nested argument.

.my-module {
    @include generate-variants('.my-module', my-module, true);
}

Output

.my-module {
    padding: 4rem;

    .my-module-item {
        background-color: var(--color);
    }
    .my-module-link {
        color: var(--color);
    }
    .my-module-link:hover {
        color: var(--color);
    }
}
.my-module-primary {
    .my-module-item {
        background-color: var(--color);
    }
    .my-module-link {
        color: var(--color);
    }
    .my-module-link:hover {
        color: var(--color);
    }
}
.my-module-large {
    padding: 8rem;
}

Outset #

outset-both

This mixin increases the width of the block to both ends.

.item-outset-both {
    @include outset-both(40px);
}

Output

.item-outset-both {
    position: relative;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
    transform: translateX(-50%) translate3d(0,0,0);
    left: 50%;
}

outset-left

This mixin increases the width of the block to the left.

.item-outset-left {
    @include outset-left(40px);
}

Output

.item-outset-left {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    transform: translateX(-40px) translate3d(0,0,0);
}

outset-right

This mixin increases the width of the block to the right.

.item-outset-right {
    @include outset-right(40px);
}

Output

.item-outset-right {
    position: relative;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    transform: translateX(40px) translate3d(0,0,0);
    left: -40px;
}

outset-none

This mixin resets all specified outset for the block.

.item-outset-none {
    @include outset-none;
}

Output

.item-outset-none {
    width: auto;
    max-width: none;
    transform: translateX(0);
    left: initial;
}

Text #

dropcap

Syntax

dropcap($size, $line: 1.5, $lines: 3, $magic1: 1, $magic2: 1)

• $size — font size of the text
• $line — line height of the text
• $lines — how many lines of the text should be dropcap
• $magic1 — adjust font size
• $magic2 — adjust line height

This mixin creates dropcaps in the text.

.dropcap:first-letter {
    @include dropcap(16px, 1.5, 3);
    font-family: 'Times New Roman', serif;
}

Utility #

transition

Syntax

transition($transition: all .2s  linear)

This mixin provides a shorthand syntax for transitions.

@include transition;
@include transition(all .2s ease-in-out);
@include transition(opacity 1s ease-in, width .2s ease-in);

Output

transition: all .2s linear;
transition: all .2s ease-in-out;
transition: opacity 1s ease-in, width .2s ease-in;

placeholder

Sets the color for placeholders in inputs.

@include placeholder($color);

Output

&::-webkit-input-placeholder {
    color: var(--color-placeholder);
}
&::-moz-placeholder {
    color: var(--color-placeholder);
}
&::-ms-input-placeholder {
    color: var(--color-placeholder);
}
&::placeholder {
    color: var(--color-placeholder);
}

centered

Center the block horizontally.

.hero {
    @include centered;
}

Output

.hero {
    margin-left: auto;
    margin-right: auto;
}

uncentered

Cancels horizontal centering of the block.

.hero {
    @include uncentered;
}

Output

.hero {
    margin-left: initial;
    margin-right: initial;
}

stretched

Stretches the link to the width and height of the whole block.

.item {
    position: relative;
}
.item a {
    @include stratched;
}

Output

.item {
    position: relative;
}
.item a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}