Sass ile str-replace
Sass ile string değiştirme ve prefix ekleme

CSS işlemleri için Sass kullanmayı tercih ediyorum. Yine ufak bir animasyon için css yazarken üçüncü parti bir araç eklemekle uğraşmayayım da mümkün olan tüm prefixleri ekleyen ufak bir mixin yazayım dedim. Başka zamanlarda da işime yarar...

Mixin'i yazdım, prefix gerektiren CSS anahtarları için kullanacağım... Da bazen bu merette değerlere de prefix uygulamak gerekiyor.

Girdim sass-lang.com'a bir de ne göreyim, string işlemleri için str-replace diye bir komut yok. Elma kurtlarına mı yazdırdınız bunu birader???

Neyse, iş başa düştü.  Buyrun, str-replace ve prefixer...

@function stringify($val) {
    $str: "";
    $comma: "";
    @each $item in $val {
        $str: $str + $comma + $item;
        $comma: ", ";
    }
    @return unquote($str);
}

@function str-replace($search, $replace, $val) {
    @if str-index($replace, $search) {
        @return $val; /* Recursive fonksiyon kullanacağım için replace değerinin
                         search değerinin içinde yer almaması gerekli.
                         Yoksa infinite loop lara yelken açarız!!! */
    }
    
    $val: stringify($val); // Gelen değer array ise önce string'e çevirmeli
    
    $pos: str-index($val, $search);
    @if $pos {
        $newVal: str-slice($val, 1, $pos - 1) + $replace + str-slice($val, $pos + str-length($search));
        $val: str-replace($search, $replace, $newVal);
    }
    
    @return $val;
}

// Hazır başlamışken, bu da prefixer
@mixin prefixer($prop, $val...) {
    $prefixes: (-webkit-, -moz-, -ms-, -o-, "");
    @each $prefix in $prefixes {
        #{$prefix}#{$prop}: str-replace("-pre-", $prefix, $val);
    }
}

Sonuç:

// Örnek
.class {
    @include prefixer(transition, -pre-transform .4s, opacity .4s, width .2s);
}

// Sonuç
.class {
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s, width 0.2s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s, width 0.2s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s, width 0.2s;
  -o-transition: -o-transform 0.4s, opacity 0.4s, width 0.2s;
  transition: transform 0.4s, opacity 0.4s, width 0.2s;
}