10 użytecznych mixin SASS dla Twojego kolejnego projektu

W tym artykule poznasz 10 użytecznych mixin SASS, które znacznie przyśpieszą pisanie stylów CSS w Twoim kolejnym projekcie.

Czym są mixiny?

Wielokrotne powtarzanie tego samego kodu nigdy nie jest dobrym pomysłem. Z pomocą przychodzą nam mixiny, które pozwalają na wykorzystanie tego samego zestawu reguł wielokrotnie. Dzięki temu jakiekolwiek modyfikacje są proste, łatwe i przyjemne 🙂

Nie miałeś wcześniej kontaktu z preprocesorem SASS? Sprawdź „Kurs SASS dla początkujących”.

Znasz przynajmniej podstawy SASS? Świetnie, przejdźmy do użytecznych mixin.

Motyw kolorystyczny

Ta mixina pozwoli Ci w prosty sposób stworzyć dowolną ilość motywów kolorystycznych. Wszystko, co musisz wprowadzić, to nazwa motywu (klasa) i kolor główny, który następnie zostanie rozjaśniony (lighten) o 10%.

SASS

@mixin theme($name, $color) {
  $primary: $color;
  $secondary: lighten($color, 10%);
  .#{$name} {
    body {
      color: $primary;
    }
    section {
      background: $secondary;
    }
  }
}

@include theme(theme-ruby, #841B2D);
@include theme(theme-carrot, #e67e22);

Wynikowy CSS

.theme-ruby body {
    color: #841B2D;
}
.theme-ruby section {
    background: #ae243b;
}

.theme-carrot body {
    color: #e67e22;
}
.theme-carrot section {
    background: #eb9950;
}

Auto marginesy

Ta prosta mixina służy do wyśrodkowania elementu. Nie musimy się obawiać, że marginesy dolny i górny zostaną wyzerowane (jak w przypadku margin: 0 auto).

SASS

@mixin margin-auto {
    margin: {
        left: auto;
        right: auto;
    }
}

div {
  margin-top: 30px;
  @include margin-auto;
}

Wynikowy CSS

div {
   margin-top: 30px;
   margin-left: auto;
   margin-right: auto;
}

Clearfix

Szybkie rozwiązanie popularnego problemu z wysokością kontenera.

SASS

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

section {
  @include clearfix;
}

Wynikowy CSS

section:after {
    content: "";
    display: table;
    clear: both;
}

Wyśrodkowanie absolutne

Świetna mixina, która pozwala na wyśrodkowanie elementu absolutnie na 3 sposoby: w pionie (vertical), poziomie (horizontal) i całkowicie (both).

SASS

@mixin center($position) {
  position: absolute;

  @if $position == 'vertical' {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  @else if $position == 'horizontal' {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
  }
  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.parent {
  position: relative;
  .child {
    @include center(both);
  }
}

Wynikowy CSS

.parent {
    position: relative;
}
.parent .child {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Gradient

Szybkie tworzenie gradientu dzięki użyciu SASS.

SASS

@mixin background-gradient($start-color, $end-color, $orientation) {
    background: $start-color;

    @if $orientation == 'vertical' {
      background: -webkit-linear-gradient(top, $start-color, $end-color);
      background: linear-gradient(to bottom, $start-color, $end-color);
    } @else if $orientation == 'horizontal' {
      background: -webkit-linear-gradient(left, $start-color, $end-color);
      background: linear-gradient(to right, $start-color, $end-color);
    } @else {
      background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
      background: radial-gradient(ellipse at center, $start-color, $end-color);
    }
}

.gradient {
  @include background-gradient(#3498db, #2c3e50, horizontal);
}

Wynikowy CSS

.gradient {
    background: #3498db;
    background: -webkit-linear-gradient(left, #3498db, #2c3e50);
    background: linear-gradient(to right, #3498db, #2c3e50);
}

Trójkąt CSS

Ta mixina pozwala na generowanie trójkątów w 4 kierunkach.

SASS

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) {
    width: 0;
    height: 0;
    @if $round {
        border-radius: 3px;
    }
    @if $direction == down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
        margin-top: 0 - round( $size / 2.5 );
    } @else if $direction == up {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: $size solid $color;
        margin-bottom: 0 - round( $size / 2.5 );
    } @else if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        margin-right: -$size;
    } @else if  $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        margin-left: -$size;
    }
}

.triangle {
  @include css-triangle(red, up, 100px);
}

Wynikowy CSS

.triangle {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid red;
    margin-bottom: -40px;
}

Keyframes

Automatyczne dodanie prefixów do keyframes.

SASS

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

span {
    @include keyframes(animate) {
      50% {
        transform: rotate(90deg);
      }
      100% {
        transform: rotate(-90deg);
      }
    }
}

Wynikowy CSS

@-webkit-keyframes animate {
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}
@-moz-keyframes animate {
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}
@keyframes animate {
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}

Dodawanie fontów

Przydatna mixina, jeśli chcemy załadować font z pliku. Wystarczy podać nazwę fonta i ścieżkę do plików, a mixina wygeneruje potrzebną regułę font-face.

SASS

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
         url($file-name + '.woff') format('woff'),
         url($file-name + '.ttf')  format('truetype'),
         url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
 }

 @include font-face('MuseoSans', '/fonts/MuseoSans');

Wynikowy CSS

@font-face {
    font-family: "MuseoSans";
    src: url("/fonts/MuseoSans.eot");
    src: url("/fonts/MuseoSans.eot?#iefix") format("embedded-opentype"), url("/fonts/MuseoSans.woff") format("woff"), url("/fonts/MuseoSans.ttf") format("truetype"), url("/fonts/MuseoSans.svg#MuseoSans") format("svg");
    font-weight: normal;
    font-style: normal;
}

Obrazki Retina

Tej mixiny użyjemy, jeśli chcemy załadować obrazek o wyższej rozdzielczości na ekranach typu retina.

SASS

@mixin retina($image, $width, $height) {
   @media (min--moz-device-pixel-ratio: 1.3),
   (-o-min-device-pixel-ratio: 2.6/2),
   (-webkit-min-device-pixel-ratio: 1.3),
   (min-device-pixel-ratio: 1.3),
   (min-resolution: 1.3dppx) {
     background-image: url($image);
     background-size: $width $height;
   }
}

.site-logo {
   background-image: url("img/logo.png");
   @include retina("img/retina/logo.png", 100px, 21px);
}

Wynikowy CSS

.site-logo {
    background-image: url("img/logo.png");
}

@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6 / 2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
    .site-logo {
        background-image: url("img/retina/logo.png");
        background-size: 100px 21px;
    }
}

Media queries

Ta mixina umożliwia szybkie generowanie reguł media queries.

SASS

@mixin screen($size) {
  $desktop: "(min-width: 1024px)";
  $tablet: "(min-width: 768px)";
  $mobile: "(min-width: 460px)";
  @if $size == desktop {
    @media only screen and #{$desktop} {
      @content;
    }
  }
  @else if $size == tablet {
    @media only screen and #{$tablet} {
      @content;
    }
  }
  @else if $size == mobile {
    @media only screen and #{$mobile} {
      @content;
    }
  }
  @else {
    @media only screen and #{$size} {
      @content;
    }
  }
}

.sidebar {
  display: none;
  @include screen('tablet') {
    display: block;
    width: 20%;
  }
  @include screen('desktop') {
    width: 30%;
  }
}

Wynikowy CSS

.sidebar {
    display: none;
}
@media only screen and (min-width: 768px) {
    .sidebar {
        display: block;
        width: 20%;
    }
}
@media only screen and (min-width: 1024px) {
    .sidebar {
        width: 30%;
    }
}

Znasz inne ciekawe mixiny? Podziel się w komentarzu 🙂