Yeni WordPress Tema Tasarımcıları İçin Sass'a Giriş

Yeni bir WordPress tema tasarımcısı olarak, uzun CSS dosyalarını düzenli, ölçeklenebilir ve okunabilir tutarken bakımını yapmanın zorluklarını hızla öğrenirsiniz.

WPBeginner'daki ekip dahil olmak üzere birçok tasarımcı ve ön yüz geliştiricisi, işi kolaylaştırmak için Sass veya LESS gibi bir CSS ön işlemci dili kullanmayı öneriyor. Peki bu ön işlemciler nelerdir? Ve onlarla nasıl başlanır?

Bu makale, yeni WordPress tema tasarımcıları için Sass'a bir giriştir. Bir CSS ön işlemcisinin ne olduğunu, neden ona ihtiyacınız olduğunu ve bunları nasıl kurup hemen kullanmaya başlayacağınızı anlatacağız.

Sass (Syntactically Awesome Stylesheet) Nedir?

Kullandığımız CSS, kullanımı kolay bir stil sayfası dili olacak şekilde tasarlanmıştır. Ancak, web gelişti ve bu nedenle tasarımcıların daha az çaba ve zamanla daha fazlasını yapmalarını sağlayan bir stil sayfası diline sahip olmaları gerekiyor.

Sass gibi CSS ön işlemci dilleri, değişkenler, temel matematik operatörleri, yuvalama, mixin'ler vb. gibi şu anda CSS'de bulunmayan özellikleri kullanmanıza olanak tanır.

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

3.8 sürümünden bu yana, WordPress yönetim alanı stilleri geliştirme için Sass'tan yararlanacak şekilde taşındı. Sass'ı geliştirme süreçlerini hızlandırmak için kullanan birçok WordPress tema mağazası ve geliştirici zaten var.

WordPress Tema Geliştirme İçin Sass'a Başlangıç

Çoğu tema tasarımcısı, temaları canlı bir sunucuya veya bir hazırlık ortamına dağıtmadan önce temaları üzerinde çalışmak için yerel geliştirme ortamını kullanır. Sass bir ön işlemci dil olduğu için, bunu yerel geliştirme ortamınıza kurmanız gerekecektir.

Yapmanız gereken ilk şey Sass'ı kurmaktır. Komut satırı aracı olarak kullanılabilir, ancak Sass için bazı güzel GUI Uygulamaları da mevcuttur. Mac, Windows ve Linux için ücretsiz bir açık kaynaklı uygulama olan Koala'yı kullanmanızı öneririz.

Bu makalenin amacı doğrultusunda boş bir tema oluşturmanız gerekecek. Sadece /wp-content/themes/ içine yeni bir klasör oluşturun. Adını 'mytheme' veya istediğiniz başka bir şey koyabilirsiniz. Boş tema klasörünüzün içine başka bir klasör oluşturun ve adını stylesheets koyun.

Stylesheets klasöründe, Not Defteri gibi bir metin düzenleyici kullanarak style.scss adında bir dosya 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, temanızın dizinini bulun ve projeniz olarak ekleyin. Koala'nın stylesheets dizinindeki Sass dosyasını otomatik olarak bulup görüntülediğini fark edeceksiniz.

Sass dosyanıza sağ tıklayın ve Çıktı Yolu Belirle seçeneğini seçin. Şimdi temanızın ana dizininin kökünü seçin, örneğin, /wp-content/themes/mytheme/ ve enter tuşuna basın. Koala şimdi temanızın dizininde CSS çıktı dosyası oluşturacaktır.

Bunu test etmek için Sass dosyanız style.scss'i 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, kenar çubuğu sağ taraftan kayarak açılacaktır. Sass dosyanızı derlemek için sadece ‘Derle’ düğmesine tıklayın.

Sonuçları temanızın dizinindeki style.css dosyasını açarak görebilirsiniz ve bu şekilde işlenmiş CSS'yi içerecektir:

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

Sass dosyamızda bir $fonts değişkeni tanımladığımızı unutmayın. Artık yazı tipi ailesi eklememiz gerektiğinde tüm yazı tiplerinin adlarını tekrar yazmamıza gerek kalmayacak. Sadece $fonts kullanabiliriz.

Sass'ın CSS'e Getirdiği Diğer Süper Güçler Nelerdir?

Sass inanılmaz derecede güçlü, geriye dönük uyumlu ve öğrenmesi çok kolaydır. Daha önce de belirttiğimiz gibi değişkenler, iç içe kullanma, mixin'ler, içe aktarma, parçalar, matematiksel ve mantıksal operatörler vb. oluşturabilirsiniz.

Şimdi size bazı örnekler göstereceğiz ve bunları WordPress temanızda deneyebilirsiniz.

Birden Fazla Stil Sayfasını Yönetme

Bir WordPress tema tasarımcısı olarak karşılaşacağınız yaygın sorunlardan biri, çok sayıda bölüm içeren büyük stil sayfalarıdır. Temanız üzerinde çalışırken muhtemelen işleri düzeltmek için bol bol yukarı ve aşağı kaydıracaksınız.

Sass kullanarak, ana stil sayfanıza birden çok dosyayı içe aktarabilir ve temanız için tek bir CSS dosyası oluşturabilirsiniz.

CSS @import'a ne dersiniz?

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, dosyaları Sass dosyanıza dahil edecek ve tarayıcılar için hepsini tek bir CSS dosyasında sunacaktır.

Sass'ta @import kullanmayı öğ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 reset dosyasının içe aktarılmasını istediğiniz yere bu satırı eklemeniz gerekiyor:

@import 'reset';

Dosya adının tamamını girmenize gerek olmadığını unutmayın. Bunu derlemek için Koala'yı açıp derleme düğmesine tekrar tıklamanız gerekir. Şimdi temanızın ana style.css dosyasını açın ve sıfırlama CSS'nizin buna dahil olduğunu göreceksiniz.

Sass'ta İç İçe Kullanım

HTML'den farklı olarak CSS yuvalanmış bir dil değildir. Sass, yönetimi ve üzerinde çalışması kolay yuvalanmış dosyalar oluşturmanıza olanak tanır. Örneğin, makale seçicisi altında <article> bölümü için tüm öğeleri yuvalayabilirsiniz.

Bir WordPress tema tasarımcısı olarak bu, farklı bölümler üzerinde çalışmanıza ve her öğeyi kolayca stilize etmenize olanak tanır. Yuvalamayı uygulamada görmek için style.scss dosyanıza şunu 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;
} 
} 

İşlendikten sonra aşağıdaki CSS'yi çıktı olarak 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ı bir görünüm ve his tasarlayacaksınız. Sass'ta iç içe kullanmak, onu iyi yapılandırılmış hale getirir ve aynı sınıfları, seçicileri ve tanımlayıcıları tekrar tekrar yazmak zorunda kalmazsınız.

Sass'ta Mixins Kullanımı

Bazen CSS'nin tamamını projenizde yeniden kullanmanız gerekebilir, stil kuralları aynı olsa bile farklı seçiciler ve sınıflar üzerinde kullanacağınız için. Mixin'ler burada kullanışlıdır. Stil.scss dosyanıza bir mixin ekleyelim:

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

Bu karışım, bazı metinlerin görüntülenmesini temel olarak gizler. Logonuz için metni gizlemek üzere bu karışımı nasıl kullanabileceğinize dair bir örnek aşağıdadır:

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

Bir mixin eklemek için @include kullanmanız gerektiğini unutmayın. İşlendikten sonra aşağıdaki CSS'yi oluşturacaktır:

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

Mixins, satıcı önekleriyle de çok yardımcı olur. Opaklık değerleri veya kenarlık yarıçapı eklerken, mixins kullanarak zamandan büyük ölçüde tasarruf edebilirsiniz. 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); }

Derlemeden 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
The Sass Way

Umuyoruz ki 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'nin önceden işleneceğini ve WordPress tema geliştiricilerinin oyunlarını yükseltmeleri gerektiğini söylemeye kadar gidiyor. Ayrıca tema tasarımcıları için WordPress body class ipuçları rehberimize veya en iyi sürükle ve bırak WordPress sayfa oluşturucular hakkındaki uzman seçimlerimize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.