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.

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.