Sass'ı Anlamak İçin Basit ve Kolay Bir Rehber

Bir süre önce Thoriq Firdaus, size bu son derece yararlı CSS işlemcisi dilini nasıl kuracağınızı ve kullanacağınızı gösteren Sass'a başlama hakkında harika bir makale yazdı (başlamak için onu kontrol etmek isteyebilirsiniz, biliyorsunuz).

Bu makalede, Sass ile neler yapabileceğinizi ve geliştiricilerin her gün daha iyi ve daha modüler bir CSS kodu oluşturmak için nasıl kullandıklarını size biraz daha iyi anlatacağımı düşündüm. İstediğiniz bölüme atlayın:

Ticaret Araçları
Değişkenler
yuvalama
Kural Kümelerinin Genişletilmesi
Katmalar
Yer Tutucu Seçicileri
Operasyonlar
Fonksiyonlar

Ticaret Araçları

Thoriq, Sass'ı komut satırından nasıl kullanabileceğinizi gösterdi. sass - saat komuta.

Eğer GUI araçlarını tercih ederseniz, Sass'ı derlemek, birleştirmek, otomatik düzeltme ve çok daha fazlası için kişisel geliştirici uygulamam Codekit ile gidebilirsiniz. Prepros, tüm sistemlerde kullanılabilecek çok yetenekli bir uygulamadır. Her ikiside ücretli uygulamalar ama uzun vadede onları kullanacaksanız buna değer.

Eğer sadece Sass'ı denemek istersen hiçbir şey için para ödemeden Premium meslektaşlarına karşı zeminini tutabilecek ücretsiz çapraz platform özellikli bir uygulama olan terminali veya Koala'yı (incelememiz işte) kullanabilirsiniz..

Değişkenler

Başınızı sarmanız gereken ilk şeylerden biri değişkenlerdir. Bir PHP'den veya benzer bir kodlama dili geçmişinden geliyorsanız, bu sizin için ikinci bir özellik olacaktır. Değişkenler bit ve tekrar kullanılabilir bilgi parçalarının depolanması, örneğin bir renk değeri gibi:

 $ birincil_renk: # 666666; .buton renk: $ birincil_renk;  .important renk: $ Primary_color;

Bu burada çok kullanışlı görünmeyebilir, ancak 3.000 kod satırına sahip olduğunuzu düşünün. Renk düzeniniz değişirse, her bir renk değerini CSS'de değiştirmeniz gerekecektir. Sass ile sadece yapabilirsiniz değeri değiştir arasında $ primary_color değişken ve onunla yapılması.

Değişkenler için kullanılır font adlarını, boyutları, renkleri ve diğer birçok bilgiyi saklamak. Daha büyük projeler için, tüm değişkenlerinizi ayrı bir dosyaya aktarmaya değebiliriz (bunun yakında nasıl yapıldığına bir göz atacağız). Bunun yapmanıza izin verdiği şey tüm projenizi yeniden renklendirmek ve yazı tiplerini ve diğer önemli yönleri değiştirmek. gerçek CSS kurallarına hiç dokunmadan. Tek yapmanız gereken bazı değişkenleri değiştirmek..

yuvalama

Sass'ın size sunduğu bir diğer temel özellik kuralları yerleştirme yeteneği. Bir gezinti menüsü oluşturduğunuzu varsayalım. Sende var nav Sırasız bir liste, elemanlar ve bağlantılar içeren eleman. CSS'de şöyle bir şey yapabilirsiniz:

 #header nav / * Gezinti alanı kuralları * / #header nav ul / * Menü kuralları * / #header nav li / * Liste öğeleri için kurallar * / #header nav a / * Kurallar bağlantılar için * /

Seçicilerde kendimizi çok tekrar ediyoruz. Elementlerin ortak kökleri varsa, iç içe geçmeyi kullanabiliriz. kurallarımızı daha temiz bir şekilde yazın.

İşte yukarıdaki kodun Sass'ta nasıl göründüğü:

 #header nav / * Gezinti alanı kuralları * / ul / * Menü kuralları * / li / * Liste öğeleri için kurallar * / a / * Bağlantılar için kurallar * /

Yuvalama son derece yararlıdır çünkü stil sayfalarını (çok) daha okunaklı hale getirir. İç içe geçmeyi uygun girinti ile birlikte kullanarak elde edebilirsiniz yüksek okunaklı kod yapıları, Çok miktarda kodunuz olsa bile.

Yuvalamanın bir sakıncası gereksiz spesifikliğe yol açmak. Yukarıdaki örnekte bağlantılara atıfta bulundum # header nav a. Ayrıca kullanabilirsiniz #header nav ul li a muhtemelen çok fazla olurdu.

Sass'ta yapmanız gereken tek şey kurallarınızı yerleştirmek olduğundan, çok özel olmak çok daha kolaydır. Aşağıdakiler çok daha az okunabilir ve oldukça spesifik.

 #header nav / * Gezinti alanı kuralları * / ul / * Menü kuralları * / li / * Liste öğeleri için kurallar * / a / * Bağlantılar için kurallar * /

Kural Kümelerinin Genişletilmesi

Nesne yönelimli dillerle çalışıyorsanız, genişletme işlemi aşina olacaktır. Bir örnek aracılığıyla en iyi anlaşılırsa, birbirlerinin hafif çeşitlemeleri olan 3 düğme oluşturalım..

 .button display: satır içi blok; renk: # 000; arkaplan: # 333; Çerçeve-yarıçapı: 4 piksel; dolgu maddesi: 8px 11px;  .button-birincil @extend .button; arkaplan: # 0091C2 .button-small @extend .button; yazı tipi boyutu: 0.9em; dolgu maddesi: 3px 8px;

.düğme birincil ve .düğme-küçük sınıfların tümü .buton tüm özelliklerini aldıkları ve sonra kendi tanımlarını yaptıkları anlamına gelen sınıf.

Bu, bir elemanın çeşitlerinin kullanılabileceği birçok durumda son derece faydalıdır. Mesajlar (alarm / başarı / hata), düğmeler (renkler, boyutlar), menü tipleri vb. Hepsi, geniş CSS verimliliği için genişletme fonksiyonunu kullanabilir..

Uzatmanın bir uyarısı ki medya sorgularında çalışmayacaklar beklediğiniz gibi. Bu biraz daha ilerlemiş ancak bu davranışla ilgili tüm bilgileri Yer Tutucu Seçicilerini Anlama bölümünde okuyabilirsiniz - yer tutucu seçicileri yakında konuşacağımız özel bir tür.

Katmalar

Mixins, önişlemci kullanıcılarının bir başka favori özelliğidir. Karışımlar yeniden kullanılabilir kurallardır - satıcıya özel kurallar veya uzun CSS kurallarını kısaltmak için mükemmeldir..

Vurgulu öğeler için bir geçiş kuralı oluşturmaya ne dersiniz:

 @ mixing hover-effect -webkit-geçişi: arka plan rengi 200 ms; -moz-geçiş: arka plan rengi 200ms; -o-geçiş: arka plan rengi 200ms; geçiş: arka plan rengi 200ms;  a @include hover-effect;  .button @include hover-effect;

Mixins ayrıca değişkenleri kullanmanıza izin verir. karışım içindeki değerleri tanımlayabilir. Yukarıdaki örneği tekrar yazabiliriz geçişin tam zamanı üzerinde bize kontrol ver. Düğmelerin örneğin biraz daha yavaş geçişini isteyebiliriz..

 @mixin vurgulu etkisi ($ hız) -webkit-geçiş: arka plan rengi $ hız; -moz-geçişi: arka plan rengini $ hız; -o-geçiş: arka plan rengini $ hız; geçiş: arka plan rengi $ hız;  a @ vurgulu etkisi (200 msn);  .buton @include hover-effect (300ms);

Yer Tutucu Seçicileri

Yer tutucu seçicileri Sass 3.2 ile tanıtıldı ve oluşturulan CSS kodunuzda biraz şişkinliğe neden olabilecek bir sorunu çözdü. Hata mesajları oluşturan bu koda bir göz atın:

 .mesaj font-size: 1.1em; dolgu: 11px; Çerçeve genişliği: 1 piksel; border-style: solid;  .message-danger @extend .message; arkaplan: # C20030; Renk: #fff; kenarlık rengi: # A8002A;  .message-success @extend .message; arkaplan: # 7EA800; Renk: #fff; kenarlık rengi: # 6B8F00;

Bu ileti sınıfı, HTML’nizde asla kullanılmayacak gibi görünmektedir: genişletilmek üzere yaratıldı, olduğu gibi kullanılmadı. Bu, oluşturulan CSS’nizde biraz şişkinliğe neden olur. Kodunuzu daha verimli hale getirmek için yüzde işaretiyle belirtilen yer tutucu seçiciyi kullanabilirsiniz:

 % message font-size: 1.1em; dolgu: 11px; Çerçeve genişliği: 1 piksel; border-style: solid;  .message-danger @extend% düğmesi; arkaplan: # C20030; Renk: #fff; kenarlık rengi: # A8002A;  .message-success @extend% düğmesi; arkaplan: # 7EA800; Renk: #fff; kenarlık rengi: # 6D9700;

Bu aşamada, uzatmalar ve karışımlar arasındaki farkın ne olduğunu merak ediyor olabilirsiniz. Yer tutucuları kullanırsanız, parametresiz bir karışım gibi davranırlar. Bu doğrudur, ancak CSS'deki çıktılar farklılık gösterir. Fark bu yinelenen kuralları mixins süre yer tutucular aynı kuralların seçicileri paylaştığından emin olacaklar, sonuçta daha az CSS ile sonuçlanır.

Operasyonlar

Buradaki programa direnmek zor, ama şimdilik herhangi bir tıbbi şakadan kaçınacağım. Operatörler, CSS kodunuzda biraz matematik yapmanıza izin verir ve oldukça faydalı olabilir. Sass kılavuzundaki örnek bunu göstermek için mükemmeldir:

 .konteyner genişlik:% 100;  makale float: sol; genişlik: 600 piksel / 960 piksel * 100%;  kenara float: sağ; genişlik: 300 piksel / 960 piksel * 100%;

Yukarıdaki örnek, asgari güçlükle 960px tabanlı bir ızgara sistemi yaratıyor. Aşağıdaki CSS'ye hoş bir şekilde derlenecek:

 .konteyner genişlik:% 100;  makale float: sol; genişlik:% 62,5;  kenara float: sağ; genişlik:% 31,25;

İşlemler için bulduğum harika bir kullanım, aslında renkleri karıştırmak. Yukarıdaki Sass başarı mesajına bakarsanız, arkaplan renginin ve kenarlığın bir tür ilişki içerdiği açık değildir. Grinin bir gölgesini çıkartarak rengi karartabilir, ilişkiyi görünür kılabiliriz:

 $ birincil: # 7EA800; .message-success @extend% düğmesi; arkaplan: $ birincil; Renk: #fff; kenarlık rengi: $ birincil - # 111;

Çıkarılan renk ne kadar açıksa, sonuçtaki gölge o kadar koyu olur. Eklenen renk ne kadar açıksa, sonuç o kadar açık olur..

Fonksiyonlar

Kullanılacak çok sayıda işlev vardır: Sayı işlevleri, dize işlevleri, liste işlevleri, renk işlevleri ve daha fazlası. Geliştirici belgelerinde uzun listeye bir göz atın. Burada nasıl çalıştıklarını göstermek için bir çift göz atacağım.

hafifletmek ve karartmak Bir rengin açıklığını değiştirmek için işlev kullanılabilir. Bu, gölgeleri çıkarmaktan daha iyidir, her şeyi daha modüler ve açık hale getirir. Karartma işlevini kullanarak önceki örneğimize bir göz atın.

 $ birincil: # 7EA800; .message-success @extend% düğmesi; arkaplan: $ birincil; Renk: #fff; kenarlık rengi: koyu ($ birincil, 5);

İşlevin ikinci argümanı gerekli olan karartma yüzdesidir. Tüm fonksiyonların parametreleri vardır; ne olduklarını görmek için belgelere bir göz atın! İşte kendinden açıklamalı renk fonksiyonlarından birkaçı: desaturate, bombalamak, evirmek, gri tonlama.

tavan yapmak işlev, PHP'de olduğu gibi, sonraki tam sayıya yuvarlanmış bir sayı döndürür. Bu, sütun genişliklerini hesaplarken veya son CSS'de çok fazla ondalık basamak kullanmak istemiyorsanız kullanılabilir..

 .title font-size: ceil ($ heading_size * 1.3314);

genel bakış

Sass'taki özellikler bize daha az çabayla daha iyi CSS yazma konusunda bize büyük güç veriyor. Mixin'lerin, genişlemelerin, fonksiyonların ve değişkenlerin doğru kullanımı, stil sayfalarımızı daha sürdürülebilir, daha okunaklı ve yazması kolay hale getirecek.

Başka bir benzer CSS işlemcisi ile ilgileniyorsanız, LESS'e bir göz atmanızı öneririz (veya başlangıç kılavuzumuzu inceleyin) - temel prensip aynıdır!