Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Odkąd pojawiły się preprocesory CSS i na stałe zagościły w naszej pracy, zapominamy często o czarnej robocie, które za nas wykonują. Jedną z najlepszych możliwości preprocesorów są tzw. mixiny czyli coś na podobieństwo funkcji w programowaniu. Dzięki nim unikamy wielu powtórzeń tego samego kodu w różnych lokalizacjach. Prezentuję wam kilka moich ulubionych mixinów, napisanych w składni SCSS.

Placeholder

Mixin ten obsługuje stylowanie atrybutu placeholder w elementach formularza. Zapewnia nam wsparcie dla najważniejszych silników graficznych.

@mixin placeholder {
  &.placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &::-webkit-input-placeholder { @content; }
}

Przykład użycia:

input {
   @include placeholder {
      color: #ccc;
      font-style: italic;
   }
}

Font size

Drugim ulubionym mixinem z jakiego korzystam w każdym projekcie jest font-size. Jako argument przyjmowana jest względna jednostka wielkości fonta. Zwracany jest kod CSS z jednostką rem oraz wartością w pikselach (dla starszych przeglądarek).

@mixin font($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Efektem poniższego wykorzystania funkcji będzie przypisanie znacznikowi p wielkości czcionki 2.4rem, co przypadku globalnego font-size: 62.5% odpowiada 24px.

p {
   @include font(2.4);
}

Font smoothing

Font smoothing działa jedynie jedynie na silnikach Webkit i Firefox. Mimo to, warto wygładzać czcionki – w większości przypadków wyglądają znacznie lepiej.

@mixin smooth {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

Przykład użycia:

h1 {
   @include smooth();
}

Pseudoelementy

Gdy korzystasz z elementów :before oraz :after zawsze musisz podać przynajmniej trzy atrybuty. Warto zatem wykorzystać mixin, który załatwia sprawę w jednej linijce.

@mixin pseudo($display: block, $position: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $position;
}

Przykład użycia:

div {
   @include pseudo();
   width: 100%; height: 100%;
   top:0; left: 0;
}

Responsywny kwadrat

Kolejna funkcja zmniejszająca objętość kodu. Kwadratowy blok, który dostosowuje się do szerokości kontenera. Szczególnie przydatny w układzie typu „kafelki”.

@mixin square {
   widtht: 100%;
   height: 0;
   padding-bottom: 100%;
   position: relative;
}

Przykład użycia:

.panel {
   @include square();
}
.panel__content {
   position: absolute;
   height:100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

Należy pamiętać jednak, że element wewnątrz kwadratu musi być pozycjonowany absolutnie.

Breakpoint

Tworzenie breakpointów i kurczowe trzymanie się nich w całym projekcie nie musi być trudne. Definiujemy mapę breakpointów i dowolnym miejscu korzystamy z przyjaznych nazw.

$breakpoints: (
  'tablet': ( min-width:  768px ),
  'laptop': ( min-width:  1220px ),
  'desktop': ( min-width:  1600px )
);
@mixin media($name) {
   @if map-has-key($breakpoints, $name) {
      @media #{inspect(map-get($breakpoints, $name))} {
         @content;
      }
   }
}

Przykład użycia:

article {
   padding: 1em;
   @include media(laptop) {
      padding: 3em;
   } 
}

Gradient

Mixin generujący tło gradientowe. Jako parametry podajemy kolor początkowy, kolor końcowy oraz typ / kierunek gradientu.

@mixin 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);
  }
}

Przykład użycia:

body {
   @include gradient(#ff57a6, #db2b7e, vertical);
}

Ułatwiaj sobie życie

Na prawdę warto tworzyć swoją własną biblioteczkę, którą będziesz stosował we wszystkich projektach.  Mimo, że stosowanie mixinów w żaden sposób nie zmniejsza objętości arkusza CSS, znacznie poprawia komfort pracy i czas poświęcony na pisanie styli. Twój kod stanie się bardziej czytelny i łatwiej wprowadzisz zmiany jeśli zajdzie taka potrzeba.

Nie bój się eksperymentować, pisz funkcje, które według Ciebie są przydatne i stosuj je konsekwentnie. A może już masz czym się pochwalić? Napisz w komentarzu.

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.