Yeni bir WordPress tema tasarımcısı olarak, uzun CSS dosyalarını tutmanın zorluklarını hızlı bir şekilde öğrenirken, onları düzenli, ölçeklenebilir ve okunabilir tutarsınız. Ayrıca, birçok tasarımcının ve ön uç geliştiricinin Sass veya LESS gibi bir CSS ön işlemci dili kullanmanızı tavsiye ettiğini öğreneceksiniz. Ama bunlar neler? ve onlarla nasıl başlayacaksınız? Bu makale, yeni WordPress Tema Tasarımcıları için Sass’a giriş niteliğindedir. Size bir CSS ön işlemcisinin ne olduğunu, buna neden ihtiyacınız olduğunu ve bunları nasıl kurup hemen kullanmaya başlayacağınızı anlatacağız.
Sass nedir?
Kullandığımız CSS, kullanımı kolay bir stil sayfası dili olacak şekilde tasarlanmıştır. Ancak web gelişti ve tasarımcıların daha az çaba ve zamanla daha fazlasını yapmalarına olanak tanıyan bir stil sayfası diline sahip olma ihtiyacı da gelişti. Sass gibi CSS ön işlemci dilleri, değişkenler, temel matematik operatörleri, iç içe yerleştirme, karışımlar vb. Gibi şu anda CSS’de bulunmayan özellikleri kullanmanıza izin verir.
Sunucuda bir komut dosyası çalıştıran ve bir HTML çıktısı oluşturan 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ı önceden işler.
3.8 sürümünden bu yana, WordPress yönetici alanı stilleri, geliştirme için Sass’ı kullanmak üzere taşındı. Geliştirme süreçlerini hızlandırmak için zaten 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ırlık 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ğu için, onu yerel geliştirme ortamınıza yüklemeniz gerekecektir.
Yapmanız gereken ilk şey Sass’ı kurmaktır. Bir komut satırı aracı olarak kullanılabilir, ancak Sass için bazı güzel GUI Uygulamaları da vardır. Mac, Windows ve Linux için ücretsiz açık kaynaklı bir uygulama olan Koala’yı kullanmanızı öneririz.
Bu makalenin iyiliği için boş bir tema oluşturmanız gerekecek. /wp-content/themes/ içinde yeni bir klasör oluşturun. Ona ‘efsane’ veya istediğiniz başka bir isim verebilirsiniz. Boş tema klasörünüzün içinde başka bir klasör oluşturun ve stil sayfaları olarak adlandırın.
Stil sayfaları klasöründe, Not Defteri gibi bir metin düzenleyici kullanarak bir style.scss dosyası oluşturmanız gerekir.
Şimdi yeni bir proje eklemek için Koala’yı açmanız ve artı simgesine tıklamanız gerekiyor. Ardından, tema dizininizi bulun ve projeniz olarak ekleyin. Koala’nın stil sayfaları dizininizde Sass dosyasını otomatik olarak bulacağını ve görüntüleyeceğini fark edeceksiniz.
Sass dosyanıza sağ tıklayın ve Çıktı Yolunu Ayarla seçeneğini seçin. Şimdi tema dizininizin kökünü seçin, örneğin /wp-content/themes/mytheme/ ve enter tuşuna basın. Koala şimdi tema dizininizde CSS çıktı dosyası oluşturacak. Bunu test etmek için Sass file style.scss dosyanızı Not Defteri gibi bir metin düzenleyicide style.scss 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ğda 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 şu şekilde işlenmiş CSS’ye sahip olacaktır:
body { font-family: arial, verdana, sans-serif; }
Sass dosyamızda değişken bir $fonts tanımladığımıza dikkat edin. Artık yazı tipi ailesi eklememiz gerektiğinde, tüm yazı tiplerinin adlarını yeniden yazmamız gerekmiyor. Sadece $fonts kullanabiliriz.
Sass’ın CSS’ye Getirdiği Diğer Süper Güçler Nelerdir?
Sass inanılmaz derecede güçlü, geriye dönük uyumlu ve öğrenmesi çok kolay. Daha önce bahsettiğimiz gibi değişkenler, iç içe geçme, karışımlar, içe aktarma, bölümler, 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, birçok bölümü olan büyük stil sayfalarıdır. Temanız üzerinde çalışırken bir şeyleri düzeltmek için muhtemelen çok yukarı ve aşağı kaydıracaksınız. Sass’ı kullanarak, birden çok dosyayı ana stil sayfanıza aktarabilir ve temanız için tek bir CSS dosyası oluşturabilirsiniz.
Peki ya CSS @import?
@İmport’u CSS dosyanızda kullanmanın sorunu, her @import eklediğinizde, CSS dosyanızın sunucuya başka bir HTTP isteği göndermesidir. Bu, projeniz için iyi olmayan sayfa yükleme sürenizi etkiler. Öte yandan, Sass’ta @import kullandığınızda, Sass dosyanızdaki dosyaları içerecek ve tarayıcılar için hepsini tek bir CSS dosyasında sunacaktır.
reset.scss nasıl kullanacağınızı öğrenmek için önce temanızın stil sayfaları 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 bu satırı, sıfırlama dosyasının içe aktarılmasını istediğiniz yere eklemeniz gerekir:
@import 'reset';
Tam dosya adını girmenize gerek olmadığına dikkat edin. Bunu derlemek için Koala’yı açmanız ve derleme düğmesine tekrar tıklamanız gerekir. Şimdi temanızın ana style.css dosyasını açın ve sıfırlama css’inizin içinde olduğunu göreceksiniz.
Nestin in Sass
HTML’den farklı olarak CSS, iç içe geçmiş bir dil değildir. Sass, yönetimi ve üzerinde çalışılması kolay olan iç içe geçmiş dosyalar oluşturmanıza olanak sağlar. Örneğin, <article> bölümü için tüm öğeleri makale seçicinin altına yerleştirebilirsiniz. Bir WordPress tema tasarımcısı olarak bu, farklı bölümler üzerinde çalışmanıza ve her bir öğeyi kolayca biçimlendirmenize olanak tanır. Nestin’i çalışırken görmek için 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’nin çıktısını alacaktır:
.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, gezinme menüleri, başlık vb. İçin farklı görünüm ve hisler tasarlayacaksınız. Sass’ta nestin kullanmak, onu iyi yapılandırılmış hale getirir ve aynı sınıfları, seçicileri ve tanımlayıcıları ve üzerine yazmak zorunda kalmazsınız. yeniden.
Sass’ta Mixin Kullanımı
Bazen stil kuralları aynı olsa bile, bazı CSS’leri projeniz boyunca yeniden kullanmanız gerekebilir çünkü onları farklı seçicilerde ve sınıflarda kullanacaksınız. Bu, mikslerin işe yaradığı yerdir. Style.scss dosyanıza bir mixin ekleyelim:
@mixin hide-text{ overflow:hidden; text-indent:-9000px; display:block; }
Bu karışım temelde bazı metinlerin görüntülenmesini engeller. Logonuz için metni 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’yi oluşturacaktır:
.logo { background: url("logo.png"); height: 100px; width: 200px; overflow: hidden; text-indent: -9000px; display: block; }
Karışımlar, satıcı öneklerinde de çok faydalıdır. Opaklık değerleri veya kenarlık yarıçapı eklerken, karışımları kullanarak size çok zaman kazandırabilirsiniz. Kenarlık yarıçapı eklemek için bir karışım 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; }
Bu makalenin Sass for WordPress tema geliştirmesine olan ilginizi çektiğini umuyoruz. 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ı geliştirmeleri gerektiğini söyleyecek kadar ileri gidiyor. Aşağıda bir yorum bırakarak WordPress tema geliştirmeniz için Sass gibi bir CSS ön işlemci dili kullanma hakkında ne düşündüğünüzü bize bildirin.
