Mixins

Background #

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) { ... }

Dark Theme #

This mixin generates the display conditions for the dark theme, depending on the framework settings in the $dark-theme and $dark-class variables.

// Dark theme
@include dark-theme {
    .my-module {
        ...
    }
}

Output

If the $dark-theme: true variable is turned on in the framework.

@media (prefers-color-scheme: dark) {
    .my-module {
        ...
    }
}

If the $dark-class variable is specified in the framework. For example as 'dark'.

html.dark {
    .my-module {
        ...
    }
}

If the $dark-theme: true and $dark-class variables are specified in the framework.

@media (prefers-color-scheme: dark) {
    .my-module {
        ...
    }
}
html.dark {
    .my-module {
        ...
    }
}

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;
}

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: "";
}

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;
}