Geliştiriciler İçin Sass Best Practices İpuçları ve Araçlar

JQuery’in vanilya JavaScript’inde nasıl bir devrim yarattığı gibi., Sass vanilya CSS'de devrim yarattı. Sass'ı öğrenen çoğu geliştirici asla geri dönmek istemedikleri konusunda hemfikirler. Pek çoğu, yeni geliştiricilerle ilgili en büyük sorunun, yol Sass'ı kullanıyorlar, Sass'ı kullanmıyorlar.

Web’i taradım ve bu makaleyi derledim. Genişletilebilir ve yeniden kullanılabilir Sass kodunu yazmak için en iyi yöntemler. Öneriler kendi düşüncelerime ve Sass Rehberleri gibi güvenilir web sitelerine aittir.

Bu özelliklerin tümünü kesinlikle iş akışınıza uygulamanıza gerek yoktur. Ancak, en azından bu fikirleri eğlendirmek ve potansiyel faydaları düşünmek faydalı olacaktır..

Dosya Organizasyonu

Sass geliştirme ile başlamak için en iyi yer dosya organizasyonu. Zaten modüler bir kod içindeyseniz, içe aktarmaların ve kısmi değerlerin değerini anlamalısınız (daha sonra bunlardan daha fazlası).

Ancak şimdilik DoCSSa'dan bu dosya yapı örneğine bir göz atın. Aşağıda görebileceğiniz bu dosya yapısını yeniden oluşturdum:

Bu sadece bir öneri ve dosyalarınızı düzenleyebileceğiniz birçok yoldan biri. Gibi farklı klasör yapıları kullanan diğer yöntemleri bulabilirsiniz “globaller” site genelinde SCSS ve “sayfalar” sayfaya özgü SCSS için.

Her klasörün amacını incelemek için önerilen bu organizasyon stilini gözden geçirelim:

• / globaller - Site genelinde tipografi, renkler ve ızgaralar gibi uygulanan Sass dosyalarını içerir.
• / bileşenleri - Düğmeler, tablolar veya giriş alanları gibi bileşen stillerine sahip Sass dosyaları içerir.
• / bölümler - Bir sayfadaki belirli sayfalara veya alanlara tahsis edilmiş Sass dosyalarını içerir (/ components / klasörüyle birlikte daha iyi çalışabilir)
• / utils - Bower gibi araçlarla dinamik olarak güncellenebilen Normalize gibi üçüncü taraf yardımcı programları içerir.
• main.scss - diğerlerini içe aktaran kök klasördeki birincil Sass dosyası.

Bu sadece temel bir başlangıç ​​noktasıdır ve kendi fikirlerinizle genişletebileceğiniz çok fazla alan vardır.

Ancak SCSS'nizi nasıl organize etmeyi seçerseniz seçin, sizin için çok önemlidir. bazı organizasyonlar yapmak Güncellenmesi gereken Normalize gibi kütüphaneler için ayrı bir dosya (veya klasör), ayrıca projeniz için Sass bölümlerindeki bileşenler.

Sass parsiyelleri modern en iyi uygulamalar için hayati öneme sahiptir. Bunlar, Zurb'in tasarım ekibi ve diğer birçok profesyonel ön geliştirici tarafından şiddetle tavsiye edilmektedir..

İşte Sass web sitesinden kısmi açıklama yapan bir alıntı:

“Diğer Sass dosyalarına ekleyebileceğiniz küçük CSS parçacıkları içeren kısmi Sass dosyaları oluşturabilirsiniz. Bu harika bir yol CSS'inizi modüler hale getirin ve bakımın daha kolay olmasına yardımcı olun. Kısmi, basit bir şekilde alt çizgi içeren bir Sass dosyasıdır. Buna bir şey adlandırabilirsin _partial.scss. Alt çizgi, Sass'ın dosyanın yalnızca kısmi bir dosya olduğunu ve bir CSS dosyası halinde oluşturulmaması gerektiğini bilmesini sağlar. Sass parsiyelleri @ithalat direktif.”

Ayrıca Sass dosya yapısına ilişkin bu diğer yazılara bir göz atın:

• Sass Projelerimi Nasıl Yapılandırırım?
• Estetik Sass: Mimarlık ve Stil Organizasyonu
• Kodunuzu korumanıza yardımcı olan dizin yapıları

İthalat Stratejileri

Sass ithalatının ve parsiyellerin değeri hakkında yeterince şey söylenemez. Kod organizasyonu, yalnızca çalışan bir içe aktarma yapısı ve iş akışı elde etmenin anahtarıdır.

Başlamak için en iyi yer, birlikte ithalat, değişkenler ve karışımları içeren küresel bir sayfadır. Pek çok geliştirici değişkenleri ve karışımları ayırmayı tercih ediyor, ancak bu anlambilimden geliyor.

Unutmayın ki, karışımlar Sass kodunu içe aktarmanın veya kopyalamanın bir yolu. İnanılmaz derecede güçlüydüler ama birlikte kullanılmamalılar “statik” kodu. Bunların hepsi Sass gelişiminde kullanımına sahip olan karışımlar, genişlemeler ve yer tutucuları arasında bir fark olduğunu unutmayın..

Karışımlar, kod değişiklikleri için karışıma geçen dinamik değerler ile en iyi şekilde kullanılır. Örneğin, iki renk arasında bir arka plan gradyanı oluşturan bu Sass karışımına göz atın.

@mixin linearGradient ($ üst, $ alt) background: $ top; / * Eski tarayıcılar * / arka plan: -moz-linear-gradient (üst, $ üst% 0, $ alt% 100); / * FF3.6 + * / arka plan: -webkit-gradyan (doğrusal, sol üst, sol alt, renk durdurma (% 0, $ üst), renk durdurma (% 100, $ alt)); / * Chrome, Safari4 + * / arka plan: -webkit-linear-gradient (üst, $ üst% 0, $ alt% 100); / * Chrome10 +, Safari5.1 + * / arkaplan: -o-doğrusal-gradyan (üst, $ üst% 0, $ alt% 100); / * Opera 11.10+ * / arkaplan: -ms-linear-gradyan (üst, $ üst% 0, $ alt% 100); / * IE10 + * / arkaplan: linear-gradyan (en alta, $ üst% 0, $ alt% 100); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

Karışım iki değer alır: bir üst renk ve bir alt renk. 3 veya 4+ farklı renk içeren farklı degradeler için farklı karışımlar yazabilirsiniz. Bu, özel seçenekler için parametreleri değiştirirken mixin kodunu içe aktarmanıza ve klonlamanıza olanak tanır.

Code Responsible'dan bir örnek şöyle görünür:

.button @include linearGradient (#cccccc, # 666666); 

Karışımla ilgili olarak, Sass'ın uzatma direktifinde öncelikle faydalı olan yer tutucusudur. Kuşkusuz karışımlardan daha karmaşık, ama bu bir yol olabilir seçicileri fazla kodu yeniden yazmadan bir araya getirme.

Sass'ın yalnızca bir içe aktarma yöntemi olmasına rağmen, bir dosyaya yazılabilen ancak herhangi bir yere dahil edilebilecek kod esnekliğini göstermek için karışımlar ve yer tutucuları dahil ettim.

Bir ithalat yapısı oluştururken DRY kodlama kavramlarını takip etmeyi unutmayın (Kendinizi Tekrar Etmeyin).

Adlandırma Kuralları

Adlandırma kuralları için genel kurallar değişkenler, işlevler ve karışımlara uygulanır. Sass’taki herhangi bir şeyi adlandırırken, Tüm küçük harfleri ayırmak için kısa çizgi ile kullanın..

Sass kodu sözdizimi aslında CSS kurallarının kurallarına dayanmaktadır. Akılda tutulması gereken bazı önerilen en iyi uygulamalar şunlardır:

• iki (2) boşluk girintisi, sekme yok
• ideal olarak, 80 karakter genişliğinde veya daha az
• boşlukların anlamlı kullanımı
• CSS işlemlerini açıklamak için yorumlar kullanın

Bunlar geçerli Sass kodu için gerekli öğeler değildir. Ancak bu öneriler, profesyonel geliştiricilerden geliyor. bu kural setlerinin en düzgün kodlama deneyimini sağladığını bulduk.

Ancak sözleşmelerin isimlendirilmesiyle ilgili olarak iki farklı yapıya sahip olabilirsiniz: biri Sass isimleri diğeri de CSS sınıfı isimleri. Bazı geliştiriciler Sass önerileri yerine BEM'i tercih ediyor. Hiçbiri daha fazla ya da daha az doğru değil; sadece farklı işletim prosedürleriyle farklı.

Sorun, BEM'in Sass değişkenlerine veya karışımlarına iyi bir şekilde taşınmamasıdır çünkü blok / eleman / değiştirici (BEM) yapısına sahip değildir. Şahsen Sass adlandırma kurallarını kullanmayı tercih ediyorum ancak camelCase'den kendi iç sözdiziminize kadar her şeyi deneyebilirsiniz.

Değişkenlerinizi ve karışımlarınızı düzenlerken, kategoriye göre ayırın, ardından alfabetik sıraya göre sıralayın. Bu, düzenlemeyi çok daha kolaylaştırır çünkü tam olarak nerede bir şeyler bulacağınızı biliyorsunuzdur..

Örneğin, bir bağlantı rengini değiştirmek için değişkenler dosyanızı açarsınız (belki de _variables.scss) ve renk değişkenleri için bölümü bulun. Ardından bağlantıyı ada göre bulun (başlık bağlantısı, metin bağlantısı, vb.) Ve rengi güncelleyin. Basit!

Sass dosyalarınız için bir içindekiler tablosunu nasıl yapılandırabileceğinize dair bir fikir edinmek için Foundation’ın ayarlar dosyasını inceleyin.

 // Siteler İçin Temel Ayarları // --------------------------------- // // İçindekiler: // // 1 Global // 2. Sınır Değerleri // 3. Izgara // 4. Temel Tipografi // 5. Tipografi Yardımcıları… // 1. Global // --------- $ global-font-size: 100 %; $ global genişlik: rem-calc (1200); $ global hat yüksekliği: 1.5; // vb

Başka bir adlandırma uygulaması duyarlı sınır değerler. Sass kesme noktalarını adlandırırken, cihaza özgü isimlerden kaçının. Küçük, med, lg ve xlg gibi isimler yazmak daha iyidir, çünkü birbirlerine göre.

Bu, sınır değerler arasındaki iç ilişkiler için daha iyidir, ancak geliştiricilerin hangi cihazların birbirleriyle ilişkili olduğunu bilmediği ekipler için de harikadır..

Aslında isimleri koymak için gelince, önerilir Ekstra uzun değişkenler olmadan mümkün olduğunca spesifik olun. Malısın hatırlanması kolay site genelindeki adlandırma kurallarını kabul edin kod yazarken.

Renkler, kenar boşlukları, yazı tipi yığınları ve satır yükseklikleri gibi her şey için özel adlandırma kuralları verin. Sadece isimler hızlıca geri çağrılabilir, ama aynı zamanda Mevcut bir sözdizimiyle eşleşmesi gereken yeni değişken adları yazarken işinizi kolaylaştırır.

Ama var özgüllük ve evrişim arasındaki ince çizgi. Alıştırma, bu satırı bulmanıza yardımcı olacak ve daha akılda kalıcı isimler yazmak, kodun diğer projelere kopyalanmasını kolaylaştırır.

Yuvalama ve Döngü

Bu iki Sass tekniği eylemde çok farklı, ancak ikisi de Dikkatli kullanılmazsa kötüye kullanma yeteneği.

yuvalama süreci az kodla daha fazla özgünlük oluşturmak için girintiyle bir araya getirilmiş seçiciler ekleme. Sass, hareket halinde kod yerleştirme örneklerini gösteren bir yerleştirme kılavuzuna sahiptir. Ancak yuvalama ile taşınmak kolaydır. Aşırı derecede kıskanıyorsanız, şuna benzeyen bir kod bulabilirsin:

vücut div.content div.container … vücut div.content div.container div.articles … vücut div.content div.container div.articles> div.post … 

Üzerine yazmak için çok spesifik ve neredeyse imkansız olan bu tür kod, basamaklı stil sayfalarının amacını yendi.

Bu SitePoint kılavuzunu gözden geçirerek yuvalama için üç altın kural bulacaksınız:

• Asla 3 seviyeden daha derine inme.
• CSS çıkışının temiz ve tekrar kullanılabilir olduğundan emin olun.
• Mantıklı olduğunda iç içe geçmeyi kullanın, varsayılan seçenek olarak değil.

Geliştirici Josh Broton gerektiğinde iç içe geçmeyi önerir, gerisini genel bir sözdizimi kuralı olarak girinti.

Seçicilerinizi girintili yapmak, basamaklı CSS efektlerine neden olmaz. Ancak, hangi sınıfların birbirleriyle ilişkili olduğunu saptayarak Sass dosyanızı inceleyerek daha kolay zaman geçireceksiniz.

Döngüler de olabilir uygun şekilde uygulanmadığında fazla kullanılması. Üç Sass döngüleri @için, @süre, ve @her. Hepsinin nasıl çalıştığıyla ilgili detaylara girmeyeceğim ama ilgileniyorsanız bu yazıya göz atın.

Bunun yerine korumak istiyorum döngüler kullanma amacı ve Sass'ta nasıl çalıştıklarını. Bunlar, otomatikleştirilebilecek zaman yazma kodundan tasarruf etmek için kullanılmalıdır. Örneğin, Clubmate gönderisinden Sass kodunu ve ardından çıktısını gösteren bir kod parçası:

/ * Sass kodu * / @ $ i için 1 - 8 arası $ genişlik: yüzde (1 / $ i) .col - # $ i genişlik: $ genişlik;  / * çıkış * / .col-1 genişlik:% 100; .col-2 genişlik:% 50; .col-3 genişlik:% 33.333; .col-4 genişlik:% 25;  .col-5 genişlik:% 20; .col-6 genişlik:% 16.666; .col-7 genişlik:% 14.285; .col-8 genişlik:% 12.5;

Bu sütun sınıfları bir ızgara sistemi ile birlikte kullanılabilir. Hatta döngü kodunu düzenleyerek daha fazla sütun ekleyebilir veya bazılarını kaldırabilirsiniz..

döngüler meli değil Bir seçicinin seçicilerini veya özelliklerini çoğaltmak için kullanılması; karışımlar bunun için var.

Ayrıca döngü yaparken, anahtarı depolayan Sass haritaları adı verilen bir şey vardır: veri çiftleri. İleri düzey kullanıcılar, mümkün olduğunda bunlardan yararlanmalıdır..

Ancak düzenli Sass döngüleri, tekrarlama olmadan kod çıktısı sağlamada basit ve etkilidir. Döngü kullanmanın en iyi nedeni Veri çıkışını değiştiren CSS özellikleri.

Döngünüzün yararlı olup olmadığını kontrol etmenin iyi bir yolu: kendinize sorun CSS çıktısı almanın başka bir yolu varsa, daha az kod satırına ihtiyacınız olacaktır.. Değilse, o zaman döngü sözdizimi muhtemelen harika bir fikir.

Kafanız karışıksa veya iç içe geçme ya da Sass döngüleri hakkında geri bildirim istiyorsanız, / r / sass / veya / r / css / ya da çok bilgili Sass geliştiricileri olan aktif Reddit topluluklarında bir soru sormalısınız..

modularization

Modüler Sass yazma pratiği çoğu proje için mutlak bir zorunluluktur (her projenin tartışacağını iddia ediyorum). Modülerleştirme işlemidir bir projeyi daha küçük modüllere bölmek. Bu Sass kullanılarak yapılabilir. partials.

Modüler Sass'ın ardındaki fikir, bireysel SCSS dosyalarını, küresel içeriği (tipografi, ızgaralar) veya sayfa öğelerini (sekmeler, formlar) hedefleyen belirli bir amaç için yazmaktır..

Sass modül tanımı oldukça açık ve çok özel bir öneride bulunuyor: bir modülün içe aktarılması asla kod vermemelidir.

Tüm modüller için zorunlu çıktı fikri, optimizasyon için bir kabustur. Bunun yerine, modülleri ayrı ayrı oluşturmalısınız ve sadece ihtiyacınız olanları arayın. Modüller karışımlar veya fonksiyonlar ile tanımlanabilir, ancak seçiciler içeren modüller oluşturmak da mümkündür.

Bununla birlikte, bir Sass Way makalesi, tüm seçicilerin karışım olarak yazılmasını ve yalnızca gerektiği gibi çağırılmasını önermektedir. Bunu kabul edip etmeme, sonuçta senin seçimin. Projenin büyüklüğüne ve karışım karışımlarında rahatlığınıza bağlı olduğunu düşünüyorum..

John Long’un The Sass Way’deki görevinden alıntı:

“Benim için modüller Sass projelerimin temel birimleri veya yapı taşları oldu..”

Gerçekten bir Sass rutini arıyorsanız, tamamen modüler olmanızı tavsiye ederim. Neredeyse her şeyi birincil bir CSS dosyasına dahil edilen modüler bir kısmi olarak oluşturmayı deneyin. İlk başta bu iş akışı göz korkutucu görünebilir ama özellikle daha büyük projelerle daha büyük ölçekte mantıklı geliyor.

Ayrıca, modülleri bir projeden diğerine ayrı dosyalara yerleştirdiklerinde kopyalamak çok daha kolaydır. Esneklik ve tekrar kullanılabilir kod modüler kalkınmanın temel taşlarıdır.

Sass modülleri ve modülerleştirme teknikleri hakkında daha fazla bilgi edinmek için şu yayınlara göz atın:

• CSS Modülleri: Geleceğe Hoş Geldiniz
• Modüler Sass'ın Artıları ve Eksileri
• SMACSS ve SASS ile Modüler CSS Organizasyonu

Mükemmel İş Akışınızı Bulun

Her takım ve bireysel geliştiricinin en iyi sonucu veren kendi uygulamaları vardır. Kişisel olarak sizin için en uygun uygulamaları benimsemelisiniz ya da ekibiniz için profesyonelce en iyi uygulamaları benimsemelisiniz..

Ayrıca proje otomasyonu için Gulp veya Grunt kullanmayı ve kodunuzu küçültmeyi de düşünün. Bu, çok sayıda el emeğinden tasarruf sağlayacaktır ve otomasyon araçları, şimdi şüphesiz, modern önyüz geliştirme için en iyi uygulamaların bir parçası..

Diğer kütüphaneler tarafından kullanılan en iyi uygulamalar hakkında daha fazla bilgi edinmek için Foundation'un GitHub'daki SCSS'i gibi açık kaynaklı kütüphaneleri inceleyin.

En iyi uygulamalarla ilgili şey, çoğu zaman işinizi gerçekten geliştirmeleridir, ancak birçok alternatif vardır. Sadece bir şeyler dene ve nasıl hissettiklerini görün. Her zaman öğreneceksiniz, böylece en iyi uygulamalarınız 5 yıl boyunca hızla değişebilir.

Tüm Sass süreci için sahip olduğum son bir öneri akılda kararlar almak. İşinizi kolaylaştıran kod yazın. Bunu yapmak için daha basit bir yol varsa, bir projeyi aşırı karmaşık hale getirmeyin.

Sass, CSS geliştirme deneyimini geliştirmeyi amaçlıyor. netlik ve en iyi uygulamalarla çalışın mümkün olan en iyi deneyimi elde etmek için.

Sarmak

Bir Sass iş akışındaki tıkanıklık, kod stillerini ayarlayarak ve en iyi uygulamaları izleyerek düzeltilebilir. Sass bloglarından ve profesyonel geliştiricilerinden verilen bu yayında bir avuç öneri belirledim..

Daha fazla bilgi edinmenin en iyi yolu, bu uygulamaları iş akışınıza uygulamak ve neyin işe yaradığını görün. Zamanla, bazı faaliyetlerin diğerlerinden daha yararlı olduğunu göreceksiniz, bu durumda her ne işe yararsa sakla ve ne işe yaramazsa bırak.

Sass geliştirme ile ilgili daha fazla ipucu ve en iyi uygulamaları bulmak için bu bağlantılara göz atın:

• Sass Kuralları
• Sass'ımız İçin Bir Vizyon
• Sass'tan En İyi Çıkmanıza Yardımcı olacak 8 Tavsiye
• Karışıklık Oluşturmadan Sass İçinde Genişletmek
• Sass Best Practices - 3 seviyeden fazla derinliğe yuvalama