Sass ile size hız ve kolaylık sağlayacak taktikler

Bazı FE arkadaşların Sass’ı gözünde çok büyüttüğünü görüyorum. Bu makalemde Sass eğitiminden ziyade, kullandığım hız ve kolaylık sağlayan Sass yapılardan bahsedeceğim. Ama ufak bir ipucu isterseniz, html’de blokları iç içi yazdığımızın aynı yazım mantığı vardır. CSS meraklısı kişilere sunduğu özelliklerle ile güzel bir adaptasyon süreci yaşanmaktadır.

Yazım kurallarını kavradıktan sonra, bu makale sizler içinde güzel pratik olacaktır. Front-end geliştirici arkadaşlar ve kendim için yeni projelerde hızlılık ve kolaylık sağlaması adına, en çok kullandığım Sass yapılarını paylaşacağım.

Hızlı prefix ile başlayalım.

@mixin vendorize($property, $value) {
	-webkit-#{$property}: $value;
	-moz-#{$property}: $value;
	-ms-#{$property}: $value;
	-o-#{$property}: $value;
	#{$property}: $value;
}

Eski float’cılar için yeni nesil temizleme.

@mixin clear() {
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

Metin gizleme mixini.

@mixin linkTextOffscreen() {
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    font-size: 0;
    text-align: start;
}

Hızlı :hover, :active, :focus kullanımı.

@mixin hoverActiveFocus($property, $value) {
    &:hover, &:active, &:focus {
        #{$property}: $value;
    }
}

Scrollbar özelleştirme.

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  ::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }
  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }
  ::-webkit-scrollbar-track {
      background: $background-color;
  }
  body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

Duyarlı font boyutu.

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;
  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }
  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;
    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }
  @if $fallback {
    font-size: $fallback;
  }
  font-size: $responsive;
}

Daire içine masklama ve ortalama.

@mixin on-circle($item-count, $circle-size, $item-size) {
  position: relative;
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%; 
  list-style: none;       
  
  > * {
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -($item-size / 2);
    $angle: (360 / $item-count);
    $rot: 0;

    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: 
          rotate($rot * 1deg) 
          translate($circle-size / 2) 
          rotate($rot * -1deg);
      }

      $rot: $rot + $angle;
    }
  }
}

Hızlı x,y ortalama.

@mixin centerer($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

Lazy görseli için kullandığım image placeholder.

@mixin lazy {
    width: 100%;
    animation-name: ckplace;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background-color: rgb(235, 236, 240);
    background-image: linear-gradient(to right, rgb(235, 236, 240) 10%, rgb(244, 245, 247) 30%, rgb(235, 236, 240) 50%);
    background-repeat: no-repeat;

    @keyframes ckplace {
        0% {
            background-position: -300px 0px;
        }

        100% {
            background-position: 2000px 0px;
        }
    }
}

En boy oranını korumak için, Lazyload ile uğraşanların işine eminim çok yarayacak. 🙂

@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

Duyarlı link tasarımları İçin.

@mixin linx ($link, $visit, $hover, $active, $focus) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
    &:focus {
      color: $focus;
    }
  }
}

Borderlardan üçgenler oluşturma.

@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  @if not index(top right bottom left, $direction) {
    @error "Direction must be either `top`, `right`, `bottom` or `left`.";
  }

  width: 0;
  height: 0;
  content: '';
  z-index: 2;
  border-#{opposite-position($direction)}: ($size * 1.5) solid $color;
  
  $perpendicular-borders: $size solid transparent;
  
  @if $direction == top or $direction == bottom {
    border-left:   $perpendicular-borders;
    border-right:  $perpendicular-borders;
  } @else if $direction == right or $direction == left {
    border-bottom: $perpendicular-borders;
    border-top:    $perpendicular-borders;
  }
}

Hızlı pozisyon konumlandırma.

@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

Return ile siyah beyaz opaklık uygulama.

@function black($opacity) {
  @return rgba(black, $opacity)
}
@function white($opacity) {
  @return rgba(white, $opacity)
}

Şeffaflık uygulama.

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity = $opacity-ie); //IE8
}

Hızlı overley uygulama.

@mixin coverer($index, $color, $opacity) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color, $opacity);
  z-index: $index;
}

İş arkadaşımdan gördüğüm, bana göre kullanışlı bir flex mixini.

@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
@mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex: $values;
    -webkit-flex: $values;
    -ms-flex: $values;
    flex: $values;
}
@mixin flex-direction($direction) {
    -webkit-flex-direction: $direction;
    -moz-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}
@mixin flex-wrap($wrap) {
    -webkit-flex-wrap: $wrap;
    -moz-flex-wrap: $wrap;
    -ms-flex-wrap: $wrap;
    flex-wrap: $wrap;
}
@mixin flex-flow($flow) {
    -webkit-flex-flow: $flow;
    -moz-flex-flow: $flow;
    -ms-flex-flow: $flow;
    flex-flow: $flow;
}
@mixin order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
}
@mixin flex-grow($grow) {
    -webkit-flex-grow: $grow;
    -moz-flex-grow: $grow;
    -ms-flex-grow: $grow;
    flex-grow: $grow;
}
@mixin flex-shrink($shrink) {
    -webkit-flex-shrink: $shrink;
    -moz-flex-shrink: $shrink;
    -ms-flex-shrink: $shrink;
    flex-shrink: $shrink;
}
@mixin flex-basis($width) {
    -webkit-flex-basis: $width;
    -moz-flex-basis: $width;
    -ms-flex-basis: $width;
    flex-basis: $width;
}
@mixin justify-content($justify) {
    -webkit-justify-content: $justify;
    -moz-justify-content: $justify;
    -ms-justify-content: $justify;
    justify-content: $justify;
    -ms-flex-pack: $justify;
}
@mixin align-content($align) {
    -webkit-align-content: $align;
    -moz-align-content: $align;
    -ms-align-content: $align;
    align-content: $align;
}
@mixin align-items($align) {
    -webkit-align-items: $align;
    -moz-align-items: $align;
    -ms-align-items: $align;
    align-items: $align;
}
@mixin align-self($align) {
    -webkit-align-self: $align;
    -moz-align-self: $align;
    -ms-align-self: $align;
    align-self: $align;
}

Div gizlemede, efek sorunu yaşayanlar için.

@mixin fade($type) {
  @if $type == 'hide' {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
  }
  @else if $type == 'show' {
    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s;
  }
}

Elinizin altında hoverlar için fade in, fade out her zaman olmalı.

@mixin fadeon($time) {
    -webkit-transition: all $time linear 0s;
    -moz-transition: all $time linear 0s;
    -o-transition: all $time linear 0s;
    transition: all $time linear 0s;
}

IOS gölgeleri popüler bu aralar.

@mixin shadow {
    -webkit-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.3);
}

Genelde sayaç ikonlarında yaşadığım select sorunu için kullanıyorum.

@mixin noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

İleride daha çok popüler olacak animasyon mixini.

@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }  
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }  
    @keyframes #{$animation-name} {
        @content;
    }
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('fade-out 5s 3');
}

Retina resim mixini.

@mixin image-2x($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;
  }
}

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}

Hızlı gradyan mixini.

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

Keyframe prefix zahmetinizi alır.

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

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

Hızlı block merkezleme.

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Object-fit ile resim kırparak masklama keyfi.

@mixin img-cover {
  min-height: 100%;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

Hızlı background resim kıprma.

@mixin bg-cover($url) {
  background: url($url) no-repeat center center fixed;
  background-size: cover;
}

Bootstrap 4 kullanmıyor iseniz böyle bir breakpoint tavsiye ederim. 

$breakpoint-small: 600px;
$breakpoint-med-small: 960px;
$breakpoint-med: 1175px;

@mixin screen($size, $type: max, $pixels: $breakpoint-small) {

  @if $size == 'small' {
    @media screen and ($type + -width: $breakpoint-small) {
        @content;
    }
  }

  @else if $size == 'med-small' {
    @media screen and ($type + -width: $breakpoint-med-small) {
        @content;
    }
  }

  @else if $size == 'med' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }

 @else if $size == 'large' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }

  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }

  @else {
    @content;
  }

}

Zamanla en çok kullandığım ve internetten beğendiğim sass yapılarını tek bir konuda derlemeye ve feedbacklerinize göre güncellemeye çalışacağım. Tarayıcı tutarsızlığı ve hataları normalleştirmek için reset olarak kullanabileceğiniz normalize.css‘in sass versiyonunu öneririm.

Kategori
Front-end
Bağlantı
Sass Guide
Kaynak
Micro Clearfix HackMixinBankBourbonCSS-TricksAndy.scssRetina SCSSFlexbox.scssNormalize-SCSS
Etiket
Daha Fazla Göster

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir