kod

Pusula ve Sass ile Basit, Zarif CSS Nasıl Yazılır

Bir çok tasarımcı, bir çeşit CSS ön işlemcisi kullanıyor şımarıklık , AZ veya pikap iğnesi . Bunlardan herhangi birini kullandıysanız, muhtemelen Pusula'nın Sass üzerine kurulu bir çerçeve olduğunun farkındasınızdır ve kurulumun bir kez kullanışsız olmasına rağmen, bir kez kullandıktan sonra bunu en iyi becerilerinden biri olduğunu çabucak keşfedeceksiniz. web tasarımcısı öğrenebilir.

Daha önce hiç Sass kullanmamışsanız, WDD'ye bir göz atmanızı tavsiye ederim. Sass'a giriş.

Pusula, CSS'niz için bir çerçeve gibi çalışır. Büyük bir proje üzerinde çalışırken, işlerin elden çıkması ve çoğu zaman kendi CSS'inizde bir şeyler bulmak çok kolay bir iştir. Pusula, satıcı önekleriyle çalışmanın ek yararı ile bu sorunları ele almaya çalışır.

Pusula nedir?

Yukarıda belirttiğim gibi, Compass, CSS'niz için dil ile ilgili bazı problemleri çözen bir çerçevedir. Ayrıca, geliştirmeyi daha hızlı ve daha kolay hale getirmek için birkaç araç içerir:

  • Sass gibi, Pusula değişkenleri, karmaları ve yuvalamayı destekler;
  • görüntüler, renkler, tipografi ve daha fazlası için bir dizi yardımcı işlev sunar;
  • matematiksel hesaplamaları destekler;
  • tarayıcılar arası uyumluluğun sağlanmasına yardımcı olur.

Sass ve LESS gibi, Compass sadece web sitesi tasarımını basitleştiren bir araçtır.

Pusula nasıl kurulur

Compass bir Ruby gemisidir, bu yüzden yüklemek için öncelikle makinenizde Ruby'nin kurulu olması gerekir. Neyse ki Ruby kurulumu basittir, Windows'da bunu indirmeniz yeterlidir Windows için Ruby Installer Mac / Linux'taki talimatları izleyin. Ruby sitesi.

Ruby'yi kurduktan sonra, pusulayı kurmak şu kadar kolay: 

gem install compass

Bu hem Pusula hem de Sass'ı kuracak.

Bir Pusula projesi oluşturmak istiyorsanız, şunu yazabilirsiniz: 

compass create /path/to/projectcd /path/to/projectcompass watch

Bu üç kod satırı, bir Sass dosyasını değiştirdiğinizde otomatik olarak CSS'ye derlenecekleri anlamına gelir.

Alternatif olarak, kullanabilirsiniz Codekit (Mac) veya Prepros (Windows) kaydedildiğinde Sass'i derlemek için.

Pusula ile çalışmaya başlama

Pusula modüllere ayrılmıştır ve yardımcı programlarını kullanmaya başlayabilmek için ilk önce ana .scss dosyamızda istediğiniz modülü almamız gerekmektedir. Örneğin, kullandığımız CSS3 modülünü içe aktarmak için: 

@import "compass/css3";

Şimdi, Compass'ın CSS3 ile gelen yeni özellikler için sunduğu karışımları ve miksleri kullanmaya başlayabiliriz. Bunun en iyi yanı, CSS3'e geldiğinde her zaman bir sorun olan tekrar tekrar satıcı önekleri yazmamız gerekmemesidir.

Örnek olarak, 20px'lik bir oluk ile basit bir 3 sütun düzeni oluşturmak istediğimizde, CSS'de şunları yazmamız gerekecek: 

div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}

Kodumuzu hızlı bir şekilde yapan ne kadar yönetilemez olduğunu görebilirsiniz. Compass ve Sass'ın yardımı ile tek ihtiyacımız olan şudur: 

div{@include column-count(3);@include column-gap(20px);}

Görebildiğiniz gibi, satıcı öneklerini kaldırdık ve sadece 2'de gerçekleştirdiğimiz 6 satırlık CSS'yi aldık.

Çok fazla yazmayı gerektiren bir başka CSS örneği degradelerdir. CSS'de basit bir beyazdan siyaha gradyan nasıl yazacağız: 

.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}

Pusula ile aynı etkiyi yaratmak aşağıdaki gibi basit: 

.gradient{@include background-image(linear-gradient(#fff, #000));}

Bu, sadece kod miktarını önemli ölçüde azaltmakla kalmaz, aynı zamanda renkleri değiştirmek isterseniz, Pusula versiyonunda bunları sadece bir kez değiştirmeniz gerekir.

Tam bir listesi var. CSS3 özelliklerini kısaltın.

Pusula ayrıca, biri gerçek zamanlı bir zaman tasarrufu sağlayan bağlantılar için bazı yardımcıları içerir. İlk olarak, tipografi modelini ana Sass dosyanızın başlangıcı olarak eklememiz gerekir: 

@import "compass/typography"

Tipografi modülü, stil renkleri için mükemmel bir şekilde kısadır: 

a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}

Bu Pusula hakkında en iyi şey; Günlük olarak kullandığımız kodu alır ve bize kısa versiyonlar verir.

Sonuç

Bu makale sadece Compass'a hızlı bir girişti, fakat konuyu benim yaptığım kadar heyecan verici bulmuş olsaydın, o zaman seni şiddetle tavsiye ederim. kendi web sitesini kontrol et ve mevcut olan yardımcı programların daha fazlasını keşfedin.

Umarım projelerinizde Compass ve Sass kullanmayı düşünebilirsiniz, çünkü onlar gerçekten web tasarımcının araç kutusu için inanılmaz eklemelerdir.

Compass veya Sass kullanıyor musunuz? Farklı bir ön işlemciyi tercih ediyor musunuz? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, pusula görüntüsü Shutterstock üzerinden.

şımarıklık pusula css önişleme pusula ile başlamak pusula nasıl kurulur yakut taşlar