Sass'ı Kucaklamak: Neden Vanilla CSS Kullanmayı Bırakmalısınız?

Sass ve diğer CSS ön işlemcilerini ilk duyduğumda, düşüncelerim pek hevesli değildi. “Zaten CSS kadar güzel çalışan bir şey için neden başka bir araca ihtiyacımız var?”. “Bunu kullanmayacağım”. "CSS'im ona ihtiyaç duymayacak kadar sıralandı". “Ön işlemci, CSS yazmayı bilmeyenler içindir, eğer CSS yazmayı biliyorsanız, ön işlemciye ihtiyacınız olmaz”. “Sonuçta işlemciler CSS yazmayı bilmeyenler içindir. Olsaydı, bir önişlemciye ihtiyaçları olmazdı”. Ve birkaç projede kullanmak zorunda kalana kadar bir süre onlardan kaçındım.

Bir projede vanilya CSS'ye geri dönmek zorunda kaldığım zamana kadar Sass ile çalışmaktan ne kadar keyif aldığımı fark etmemiştim. Bu süre zarfında o kadar çok şey öğrendim ki Sass'ı övmeye ve burayı daha iyi bir dünya yapmaya ve seni daha mutlu bir insan yapmaya karar verdim!

Neden Yine de Sass Kullanmalısınız?

Organizasyon: @import

Az önce bahsettiğim bu proje, büyük bir e-ticaret sitesi, 7184 satır sıkıştırılmamış stil bildirimi içeren tek bir CSS dosyasına sahipti. Evet, doğru okudunuz: yedi bin yüz seksen dört satırlık CSS. Bunun, ön uç geliştiricilerin endüstride ele alması gereken en büyük CSS dosyası olmadığından eminim, ancak tam bir karmaşaya neden olacak kadar büyüktü.

Sass'a ihtiyaç duymanızın ilk nedeni budur: stil sayfalarınızı düzenlemenize ve modülerleştirmenize yardımcı olur. Değişken değil, yuvalama değil. Benim için Sass'ın temel özelliği kısmi ve CSS @import kuralını SCSS ve Sass dosyalarını içe aktarmasına izin verecek şekilde nasıl genişlettiğidir. Pratikte bu, devasa style.css dosyanızı bakımı, anlaşılması ve düzenlenmesi daha kolay olacak birkaç küçük dosyaya bölebileceğiniz anlamına gelir.

@import kuralı neredeyse CSS'nin kendisi kadar uzun süredir var. Bununla birlikte, CSS dosyalarınızda @import kullandığınızda, içe aktardığınız her CSS dosyası için bir tane olmak üzere ayrı HTTP isteklerini tetiklediğiniz için kötü bir ün kazandı. Bu, sitenizin performansı için zararlı olabilir. Peki, Sass ile kullandığınız şey ne olur? “Ön işlemci” kelimesinin ne anlama geldiğini düşünmeyi hiç bırakmadıysanız, şimdi tam zamanı.

Önişlemci, başka bir programa girdi olarak kullanılan çıktı üretmek için girdi verilerini işleyen bir programdır. —Vikipedi

@import kuralımıza geri dönersek, bu @import'un Sass tarafından işleneceği ve tüm CSS ve SCSS dosyalarımızın tek bir dosyada derleneceği ve canlı sitemize ulaşacağı anlamına gelir. Kullanıcının yalnızca bir istek yapması gerekecek ve tek bir dosya indirecek, proje yapınız ise yüzlerce modüler dosyadan oluşabilir. Tipik bir Sass projesinin style.scss'si şöyle görünebilir:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Kendinizi Tekrar Etmeyin: Değişkenler

Sass'ı öven herhangi bir makale, muhtemelen yıldız özelliğinden - değişkenlerden bahsederek başlayacaktır. Değişkenlerin en yaygın kullanımı bir renk paletidir. Hiç kimse aynı onaltılı kodu kullanmadığı için CSS'de biraz farklı tonlar olarak biten, aynı renk olması gerekenin birkaç bildirimini kaç kez buldunuz? Sas kurtarmaya. Sass'ta hemen hemen her değere sahip değişkenler bildirebilirsiniz. Yani renk paletimiz şöyle olabilir:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

“$” ile başlayan kelimeler Sass değişkenleridir. Bunun anlamı, daha sonra stil sayfalarınızda bu kelimeleri kullanabileceksiniz ve bunlar daha önce tanımladığınız değerlerle eşleştirilecekler:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Bunun 7184 satırlık CSS kodumuzu nasıl değiştirebileceğini hayal edin ve hemen şimdi Sass istemeye başlayabilirsiniz. Daha da iyisi, markanın yeniden tasarlandığını ve CSS'nizdeki tüm renkleri güncellemeniz gerektiğini hayal edin. Sass ile yapmanız gereken tek şey bu değişkenlerin bildirimlerini bir kez güncellemek ve baam! Değişiklikler, stil sayfalarınızın her yerinde olacak.

Bu örneği bir Sass oyun alanı olan Sassmeister'da kodladım. Öyleyse devam edin ve bu değişkenleri başka bir şeye değiştirmeyi deneyin.

Değişkenlerin kullanışlılığı yalnızca renklerle sınırlı değildir, aynı zamanda yazı tipi bildirimleri, boyutları, medya sorguları ve daha fazlasıyla sınırlıdır. Bu size bir fikir vermek için gerçekten basit bir örnek, ama inanın bana, Sass ile olasılıklar sonsuzdur.

Daha Temiz Kaynak Kodu: Yerleştirme

Yuvalama, muhtemelen Sass'ın en çok bahsedilen ikinci özelliği olabilir. Sass'ı kullandıktan sonra vanilya CSS'ye geri döndüğümde, baktığım CSS dosyası o kadar karmaşık görünüyordu ki küçültülmüş olup olmadığından emin değildim. Yerleştirme olmadan, Vanilya CSS, güzel yazdırılmış .min.css dosyalarından daha iyi görünmez:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Nesting ile bir bildirimin parantezleri arasına sınıflar ekleyebilirsiniz. Sass, seçicileri oldukça sezgisel bir şekilde derleyecek ve işleyecektir. Ebeveyn seçicinin referansını almak için “&” karakterini bile kullanabilirsiniz. Örnek CSS'mize geri dönersek, onu şuna dönüştürebiliriz:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Güzel görünüyor ve okunması daha kolay. Bu örnekle oynamaktan çekinmeyin.

Yine! Kendinizi Tekrar Etmeyin: Karıştırma ve Uzatma

CSS'de tekrardan kaçınmak her zaman zordur. Ve özellikle Sass size mixins ve extension verdiğinde, bunun üzerinde biraz daha fazla durmaktan zarar gelmez. Her ikisi de güçlü özelliklerdir ve çok fazla tekrardan kaçınmaya yardımcı olur. Karıştırma ve genişletme olanaklarının bir sonu yok gibi görünüyor. Karıştırmalarla parametreli CSS bildirimleri yapabilir ve bunları stil sayfalarınızda yeniden kullanabilirsiniz.

Örneğin, içinde buton olan bir kutu modülünüz olduğunu varsayalım. Kutunun kenarlığı ile düğmenin arka planının aynı renkte olmasını istiyorsunuz. Vanilya CSS ile şöyle bir şey yaparsınız:

 .box { border: 2px solid red; } .box .button { background: red; }

Diyelim ki şimdi aynı kutu modülünü istiyorsunuz, ancak farklı bir renkle. CSS'nize şöyle bir şey ekleyeceksiniz:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Şimdi, bir kutu modülü istediğinizi varsayalım, ancak daha ince kenarlıklı. Şunları eklersiniz:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Çok fazla tekrar, değil mi? Sass ile tekrarı azaltmak için bu durumları soyutlayabilirsiniz. Bunun gibi bir mixin tanımlayabilirsiniz:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Ve böylece, kaynak kodunuz şuna indirgenebilir:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Güzel görünüyor, değil mi? Bu örnekle oynayın. Kendi karışım kitaplığınızı oluşturabilir veya daha da iyisi, oradaki topluluk kitaplıklarından birini kullanabilirsiniz.

Uzantılar benzerdir, özellikleri bir seçiciden diğerine paylaşmanıza izin verir. Ancak, birden çok bildirimin çıktısını almak yerine, özelliklerinizi tekrarlamadan bir sınıf listesi çıktılar. Bu şekilde çıktınızda kod tekrarını da önleyebilirsiniz. Önceki örneğimizdeki düğmeleri unutalım ve @extend'in .boxes ile nasıl çalıştığını görelim.

Diyelim ki bir ilk kutu ilan ettiniz:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Şimdi buna benzer, ancak farklı kenarlık renklerine sahip iki kutu istiyorsunuz. Şöyle bir şey yapabilirsiniz:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Derlenmiş CSS şöyle görünür:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Güçlü, değil mi? Örneği burada bulabilirsiniz. Ortaya çıkan CSS'yi incelerseniz, çıktıya .box sınıfının dahil edildiğini fark edeceksiniz. Bu davranışı istemiyorsanız, @extend'i "yer tutucular" ile birleştirebilirsiniz. Yer tutucu, CSS'de sınıf çıktısı vermeyecek özel bir seçicidir. Örneğin, bazen kendimi listelerin varsayılan stillerini çok fazla sıfırlarken buluyorum. Genelde @extend'i şöyle bir yer tutucuyla kullanırım:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Daha sonra bu kalıbı tüm stil sayfalarınızda yeniden kullanabilirsiniz:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Derlenmiş CSS'niz şöyle görünecektir:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Buradaki örneklere göz atın.

Daha fazla var mı?

Kesinlikle! Bu makaleyi fazla karmaşık hale getirmek istemedim, ancak sizin tarafınızdan keşfedilmeyi bekleyen bir Sassy dünyası var; ve bunların ötesinde bir çok özellik de var: işlemler, // ile tek satırlık yorumlar, işlevler, if döngüleri … “CSS ile bir 'X' yapmak harika olurdu” diye düşündüyseniz, eminim o şey 'X' zaten Sass tarafından yapıldı. “Süper güçlere sahip CSS” sloganıdır ve bu gerçeğe daha yakın olamaz.

Çözüm

Git ve yükleme sayfasını ziyaret et ve hacklemeye başla! İnan bana, pişman olmayacaksın.

Evet, Sass'ın bazı alternatifleri var. Diğer önişlemciler (LESS, Stylus), son işlemciler, Grunt vb. Hatta CSS Değişkenleri bile var. Sass'ın oradaki tek teknoloji olduğunu söylemiyorum. Tek söylediğim, bunun en iyisi olduğu! En azından şimdilik. Söylediklerime inanmıyor musun? Devam edin ve kendiniz deneyin. Pişman olmayacaksın!