Yeni WordPress Tema Tasarımcıları için Sass’a Giriş

Yeni bir WordPress tema tasarımcısı olarak, uzun CSS dosyalarını düzenli, ölçeklenebilir ve okunabilir tutmanın zorluklarını hızlı bir şekilde öğrenirsiniz.

Birçok tasarımcı ve ön uç geliştiricisi, işi kolaylaştırmak için Sass veya LESS gibi bir CSS ön işlemci dili kullanmanızı önerir. Ama bunlar nedir? Ve bunlarla çalışmaya nasıl başlanır?

Bu makale yeni WordPress tema tasarımcıları için Sass’a bir giriş niteliğindedir. Size CSS önişlemcisinin ne olduğunu, neden ihtiyacınız olduğunu ve nasıl yükleyip hemen kullanmaya başlayacağınızı anlatacağız.

Sass (Syntactically Awesome Stylesheet) nedir?

Kullandığımız CSS, kullanımı kolay bir stil sayfası dili olarak tasarlanmıştır. Ancak, web gelişti ve bu nedenle tasarımcıların daha az çaba ve zamanla daha fazlasını yapmalarına olanak tanıyan bir stil sayfası diline ihtiyaçları var. Sass gibi CSS önişlemci dilleri, değişkenler, temel matematik operatörleri, yuvalama, mixinler gibi CSS’de şu anda mevcut olmayan özellikleri kullanmanıza olanak tanır.

Sunucuda bir betiği çalıştıran ve bir HTML çıktısı üreten bir önişlemci dili olan PHP’ye çok benzer. Benzer şekilde Sass, tarayıcılar tarafından kullanılabilecek CSS dosyaları oluşturmak için .scss dosyalarını ön işleme tabi tutar.

3.8 sürümünden bu yana, WordPress yönetici alanı stilleri geliştirme için Sass’ı kullanacak şekilde taşındı. Geliştirme süreçlerini hızlandırmak için halihazırda Sass kullanan birçok WordPress tema mağazası ve geliştiricisi var.

WordPress Tema Geliştirme için Sass ile Başlarken

Çoğu tema tasarımcısı, bir hazırlama ortamına veya canlı bir sunucuya dağıtmadan önce temaları üzerinde çalışmak için yerel geliştirme ortamını kullanır. Sass bir önişlemci dili olduğundan, onu yerel geliştirme ortamınıza yüklemeniz gerekecektir.

Yapmanız gereken ilk şey Sass’ı yüklemektir. Bir komut satırı aracı olarak kullanılabilir, ancak Sass için bazı güzel GUI Uygulamaları da mevcuttur. Mac, Windows ve Linux için kullanılabilen ücretsiz bir açık kaynak uygulaması olan Koala‘yı kullanmanızı öneririz.

Bu makale için boş bir tema oluşturmanız gerekecek. Basitçe /wp-content/themes/ içinde yeni bir klasör oluşturun. Adını ‘mytheme’ ya da istediğiniz başka bir şey koyabilirsiniz. Boş tema klasörünüzün içinde başka bir klasör oluşturun ve stil sayfaları olarak adlandırın.

Stylesheets klasöründe, Notepad gibi bir metin düzenleyici kullanarak bir style.scss dosyası oluşturmanız gerekir.

Şimdi Koala’yı açmanız ve yeni bir proje eklemek için artı simgesine tıklamanız gerekiyor. Ardından, tema dizininizi bulun ve projeniz olarak ekleyin. Koala’nın stylesheets dizininizdeki Sass dosyasını otomatik olarak bulacağını ve görüntüleyeceğini göreceksiniz.

Sass dosyanıza sağ tıklayın ve Set Output Path seçeneğini seçin. Şimdi tema dizininizin kök dizinini seçin, örneğin /wp-content/themes/mytheme/ ve enter tuşuna basın. Koala şimdi tema dizininizde CSS çıktı dosyası oluşturacaktır. Bunu test etmek için Sass dosyanız style.scss ‘yi Not Defteri gibi bir metin düzenleyicide açmanız ve bu kodu eklemeniz gerekir:

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

Şimdi değişikliklerinizi kaydetmeniz ve Koala’ya geri dönmeniz gerekiyor. Sass dosyanıza sağ tıklayın ve kenar çubuğu sağa kayacaktır. Sass dosyanızı derlemek için ‘Derle’ düğmesine tıklamanız yeterlidir. Tema dizininizdeki style.css dosyasını açarak sonuçları görebilirsiniz ve işlenmiş CSS aşağıdaki gibi olacaktır:

body {
  font-family: arial, verdana, sans-serif; }

Sass dosyamızda $fonts değişkenini tanımladığımıza dikkat edin. Artık yazı tipi ailesi eklememiz gerektiğinde, tüm yazı tiplerinin adlarını tekrar yazmamıza gerek yok. Sadece $fonts kullanabiliriz.

Sass CSS’e Başka Hangi Süper Güçleri Getiriyor?

Sass inanılmaz derecede güçlü, geriye dönük uyumlu ve öğrenmesi çok kolay. Daha önce de belirttiğimiz gibi değişkenler, yuvalama, mixin’ler, import, partial’lar, matematiksel ve mantıksal operatörler vb. oluşturabilirsiniz. Şimdi size bazı örnekler göstereceğiz ve bunları WordPress temanızda deneyebilirsiniz.

Birden Çok Stil Sayfasını Yönetme

Bir WordPress tema tasarımcısı olarak karşılaşacağınız yaygın bir sorun, çok sayıda bölüm içeren büyük stil sayfalarıdır. Temanız üzerinde çalışırken bir şeyleri düzeltmek için muhtemelen çok fazla yukarı ve aşağı kaydırma yapacaksınız. Sass kullanarak birden fazla dosyayı ana stil sayfanıza aktarabilir ve temanız için tek bir CSS dosyası çıktısı alabilirsiniz.

CSS @import ne olacak?

CSS dosyanızda @import kullanmanın sorunu, her @import eklediğinizde CSS dosyanızın sunucuya başka bir HTTP isteği yapmasıdır. Bu, projeniz için iyi olmayan sayfa yükleme sürenizi etkiler. Öte yandan, Sass’ta @import kullandığınızda, Sass dosyanızdaki dosyaları dahil edecek ve hepsini tarayıcılar için tek bir CSS dosyasında sunacaktır.

Sass’ta @import’un nasıl kullanılacağını öğrenmek için öncelikle temanızın stylesheets dizininde bir reset.scss dosyası oluşturmanız ve bu kodu içine yapıştırmanız gerekir.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Şimdi ana style.scss dosyanızı açmanız ve sıfırlama dosyasının içe aktarılmasını istediğiniz yere bu satırı eklemeniz gerekir:

@import 'reset';

Tam dosya adını girmenize gerek olmadığına dikkat edin. Bunu derlemek için Koala’yı açmanız ve derle düğmesine tekrar tıklamanız gerekir. Şimdi temanızın ana style.css dosyasını açın ve sıfırlama css’inizin dosyaya dahil edildiğini göreceksiniz.

Sass’ta Nestin

HTML‘den farklı olarak CSS iç içe geçmiş bir dil değildir. Sass, yönetilmesi ve üzerinde çalışılması kolay olan iç içe dosyalar oluşturmanıza olanak tanır. Örneğin, <article> bölümü için tüm öğeleri article seçicisi altında yuvalayabilirsiniz. Bir WordPress tema tasarımcısı olarak bu, farklı bölümler üzerinde çalışmanıza ve her bir öğeyi kolayca şekillendirmenize olanak tanır. Nestin’i çalışırken görmek için bunu style.scss dosyanıza ekleyin:

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

İşlemden sonra aşağıdaki CSS çıktısını verecektir:

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

Bir tema tasarımcısı olarak, widget’lar, gönderiler, navigasyon menüleri, başlık vb. için farklı görünüm ve hisler tasarlayacaksınız. Sass’ta nestin kullanmak bunu iyi yapılandırır ve aynı sınıfları, seçicileri ve tanımlayıcıları tekrar tekrar yazmak zorunda kalmazsınız.

Sass’ta Mixinleri Kullanma

Bazen stil kuralları aynı olsa bile projeniz boyunca bazı CSS’leri yeniden kullanmanız gerekebilir çünkü bunları farklı seçiciler ve sınıflar üzerinde kullanacaksınız. İşte bu noktada mixinler işe yarar. Style.scss dosyanıza bir mixin ekleyelim:

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Bu mixin temel olarak bazı metinlerin görüntülenmesini gizler. İşte logonuzun metnini gizlemek için bu karışımı nasıl kullanabileceğinize dair bir örnek:

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Bir mixin eklemek için @include kullanmanız gerektiğine dikkat edin. İşlendikten sonra aşağıdaki CSS oluşturulacaktır:

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Mixinler, satıcı önekleri konusunda da çok faydalıdır. Opaklık değerleri veya kenarlık yarıçapı eklerken, mixinleri kullanmak size çok zaman kazandırabilir. Kenarlık yarıçapı eklemek için bir mixin eklediğimiz bu örneğe bakın.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

Derledikten sonra, aşağıdaki CSS’yi oluşturacaktır:

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Ek Kaynaklar

Sass Lang
Sass Yolu

Umarız bu makale WordPress tema geliştirme için Sass hakkında bilgi edinmenize yardımcı olmuştur. Birçok WordPress tema tasarımcısı zaten kullanıyor. Bazıları gelecekte tüm CSS’lerin önceden işleneceğini ve WordPress tema geliştiricilerinin oyunlarını geliştirmeleri gerektiğini söyleyecek kadar ileri gidiyor. Ayrıca tema tasarımcıları için WordPress gövde sınıfı ipuçları kılavuzumuza veya en iyi sürükle ve bırak WordPress sayfa oluşturucuları uzman seçimlerimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.