Sass Tasarımcıları İçin 9 Mixin Kütüphanesi
Geliştirme iş akışınızda Sass kullanıyorsanız, karışımların önemini biliyorsunuzdur. Yazılan bazı şeyleri gördüğünüzde CSS’de art arda ve sıkıcı bir şekilde, Karışımların tekrarlayan işleri önlemenize yardımcı olabileceği yer burasıdır. Bir karışım, sitenizde tekrar kullanabileceğiniz CSS bildirimleri içerir..
Geliştiricileriniz Sass ile çalışırken gelişiminizde size yardımcı olmak için birçok karışım üretmektedir. Çoğu CSS'de tekrarlayan şeyleri kapsar. itibaren birden fazla tarayıcıya uyum sağlama için düğmeler, animasyonlar ve geçiş efektleri oluşturma, Sass gelişiminiz için almanız gereken aşağıdaki 11 mixin kütüphanesinde bunu ve daha fazlasını bulun.
1. Bourbon
Bourbon, tarayıcılar arası kullanım için stil sayfalarının oluşturulmasını basitleştirmenize izin veren karma, işlev ve eklentileri içeren bir Sass kütüphanesidir. Benim için, bu en muhteşem Sass karışımı. Stil sayfanızı hafif tutarken web sitenize stil vermek için ihtiyacınız olan hemen hemen her şeyi içerir.
Her bir karışım ve işlevi kullanmak için belgelerin tümüne göz atın..
2. Sass CSS3 Mixins
Sass CSS3 Mixins, farklı tarayıcılarda çalışan karışımlar sunar. Burada arka plan, kenarlık, kutu, sütun, yazı tipi yüzü, dönüştürme, geçiş ve animasyon gibi en iyi uygulama karışımlarını bulabilirsiniz. Stil ihtiyaçlarınız için yeterli. Kullanmak için, css3-mixins.scss ve CSS sınıfınızdaki mixin'i arayın.
Bu mixin'i buradan indirin.
3. CssOwl
CssOwl, bir elemanın konumunu (göreceli veya mutlak) ayarlamak ve sözde seçici ile içerik eklemek için yararlı karışımlar sağlar ( :sonra ve :önce). Ayrıca, sprite öğeleri oluşturmak istediğinizde de yardımcı olur: mixin, sprite'ınızdaki görüntü konumunu ayarlamak için esneklik sağlar. Sass'a ek olarak, CssOwl mixin kütüphanesi, LESS ve Stylus için de mevcuttur..
4. Kesme Noktası Sass'ı
Breakpoint, Sass üzerinden medya sorguları yapmanıza yardımcı olur. Breakpoint ile değişkenler oluşturabilir ve bunu tanımlayan bir değer verebilirsiniz. Min genişlikte veya maksimum genişlik medya sorguları. Yarattığınız değişkenin anlamlı bir adı olduğundan, Sass'ta kullanım için kolayca arayabilirsiniz..
5. Scut
Scut, genel stil kodu modellerini kolayca uygulamanıza yardımcı olacak bir dizi yeniden kullanılabilir Sass karışımı, yer tutucu, işlev ve değişken içerir. Sayfa mizanpajları ve stil tipografi gibi web sayfaları oluşturmak için en iyi uygulama kodunu sağlar. Kodu daha sık tekrar kullanarak kod yazarken tekrarı azaltabilirsiniz. Böylece, süreçte daha organize olmanıza yardımcı olur.
6. Safran
Safran ile kolayca CSS3 animasyonları ve geçişleri ekleyebilirsiniz. Solmaya giriş / çıkış, içeri girme / dışarı kaydırma, içeri girme / dışarı çıkma ve sallanma, sallanma, sıçrama, sıçrama ve diğerleri gibi çeşitli efektler gibi bir düzine animasyon ve geçiş vardır. Safran'ı kullanmak için, sadece Sass bildirgesindeki mixin'i ekleyin ve CSS sınıfınızın içindeki efekt adını arayın. Bower veya Gem kullanarak kurarak Safran alabilirsiniz veya sadece Github'dan manuel olarak indirebilirsiniz..
7. Tip Ayarları
TypeSettings, Sass için bir araç seti türüdür. Yazı tipi boyutunu, em (rems ya da piksel yerine), dikey ritim ve duyarlı orana dayalı başlıkları kullanarak modüler ölçekte ayarlayacaktır. Bunu Bower ile de kurabilir, sürümü indirebilir veya repoyu klonlayabilirsiniz. Daha fazla ayrıntı için sayfasını inceleyin.
8. Sass Hattı
Sass Line, daha iyi tipografi yapmanıza yardımcı olan bir Sass karışımıdır. Yazı tipinizde rems birimi kullanır, böylece temel ızgaradan orantılı olarak çalışabilirsiniz. Sass Line, taban çizgisi ızgarasına dayanan kesin bir dikey ritim kullanır ve web sitenizin tüm yönlerinde iyi oranlar elde etmek için kesme noktalarınızın her biri için modüler bir ölçek belirlemenizi sağlar.
Nasıl kullanılacağı hakkında daha fazla bilgi almak için buraya gidin.
9. Andy.scss
Andy.scss, hafif tutarken bir web sitesinin görünümünü kolayca geliştirmenize yardımcı olmak için oluşturulmuş, kullanışlı bir Sass mixleri topluluğudur. Arka plandan animasyona, düzinelerce Sass karışımı var. Hemen hemen tüm yaygın kullanılan CSS özellikleri burada ele alınmıştır. Github'dan al.
Sass hakkında daha fazla mesaj:
- Sass'a Başlarken
- Sass'a Kazmak
- Sass Sublime Metinle Nasıl Derlenir
- Bootstrap 3'ü Sass İle Kullanma
- Sass & Compass İle Çevrimiçi Bir VCard Nasıl Oluşturulur
- Karşılaştırılan CSS Ön İşlemcileri: Sass Vs. AZ
- Sözdizimsel Olarak Müthiş Stil Sayfaları: Pusulayı Sass'ta Kullanma
- CSS'yi Sass ve SCSS'ye Dönüştürme
