Sass'ta Pusula Kullanarak Sözdizimsel Olarak Müthiş Stil Sayfaları

Son yazımızda Pusula hakkında bir kez bahsetmiştik. Resmi siteye göre, olarak tanımlanır açık kaynaklı bir CSS Yazma Çerçevesi.

Kısacası, Compass bir Sass uzantısıdır ve LESS LESS Elementi gibi, Sass'a daha güçlü bir eşlik aracı haline getiren başka birkaç şey eklemesi dışında, kullanıma hazır bir CSS3 Mixins grubuna sahiptir. Hadi kontrol edelim.

Pusula yükleme

Pusula, Sass gibi, sistemimize kurulması gerekiyor. Ancak, Scout App veya Compass.app gibi bir uygulama kullanıyorsanız, bu gerekli olmayacak.

Onlar olmadan yapman gerek. “el ile” vasitasiyla Terminal / Komut İstemi. Bunu yapmak için aşağıdaki komut satırını yazın;

Mac / Linux Terminalinde

 sudo gem yüklemek pusula 

Windows Komut İstemi'nde

 gem pusula yüklemek 

Kurulum başarılı olursa, aşağıda gösterildiği gibi bir bildirim almalısınız;

Sonra eklemek için çalışma dizininizde aşağıdaki komut satırını çalıştırın Pusula proje dosyaları.

 pusula girişi 

Daha fazla okuma: Pusula Komut Satırı Dokümantasyonu

Pusula Yapılandırması

Bu komutu çalıştırdıysanız pusula girişi, şimdi adında bir dosya olmalı config.rb çalışma dizininizde. Bu dosya proje çıktısını yapılandırmak için kullanılır. Örneğin, tercih edilen dizin isimlerimizi değiştirebiliriz..

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Compass tarafından oluşturulan yorum satırını çıkarın; ayarladık doğru yorumların basılması gerekiyorsa veya yanlış mecbur değilse.

 line_comments = yanlış 

CSS çıktısına da karar verebiliriz. Seçebileceğimiz dört seçenek var : genişletilmiş, :kompakt, :sıkıştırılmışve : iç içe. Şimdilik, hala gelişim aşamasında olduğumuz için genişlememiz gerekiyor.

 output_style =: genişletilmiş 

Bu yapılandırmaların genel olarak çoğu proje için yeterli olacağını düşünüyorum, ancak daha fazla tercihiniz varsa, her zaman bu belgelere, Pusula Yapılandırma Referansına başvurabilirsiniz..

Son olarak, ihtiyacımız var izlemek Bu komut satırıyla dizindeki her dosya;

 pusula izle 

Bu komut satırı, Sass'ta olduğu gibi her dosya değişikliğini izleyecek ve karşılık gelen CSS dosyalarını oluşturacak veya güncelleyecektir. Ancak unutma, projeyi yapılandırmayı tamamladıktan sonra bu satırı çalıştırın. config.rb, ya da sadece dosyadaki değişiklikleri görmezden gelir.

CSS3 Mixins

CSS3’ten geçmeden önce, birincil .SCSS dosyada, pusulayı şu satırdan içe aktarmamız gerekiyor @import "pusula";, Bu, tüm uzantıları Pusula’ya aktaracaktır. Ancak, yalnızca CSS3'e ihtiyacımız olursa, bu satırla daha özel olarak da yapabiliriz. @import "pusula / css3".

Daha fazla okuma: Pusula CSS3.

Şimdi, Saas ve Compass ile bir şeyler yaratmaya başlayalım. HTML belgesinde, bir tane de oluşturduğunuzu varsayarak, aşağıdaki basit işaretlemeyi koyacağız:

Fikir aynı zamanda basit; Köşeleri yuvarlatılmış döndürülmüş bir kutu oluşturacağız ve aşağıda başlangıç ​​için Sass iç içe stillerimiz;

 gövde background-color: # f3f3f3;  bölüm genişlik: 500 piksel; marj: 50 piksel otomatik 0; div genişlik: 250 piksel; yükseklik: 250px; arkaplan rengi: #ccc; marj: 0 otomatik;  

Ve yuvarlatılmış köşeleri dikdörtgene kavuşturabilmek için, Compass CSS3 Mixins'i aşağıdaki şekilde dahil edebiliriz;

 gövde background-color: # f3f3f3;  bölüm genişlik: 500 piksel; marj: 50 piksel otomatik 0; div genişlik: 250 piksel; yükseklik: 250px; arkaplan rengi: #ccc; marj: 0 otomatik; @ sınır yarıçapı dahil;  

Bu border-radius Mixins, tüm tarayıcı öneklerini üretecek ve varsayılan olarak köşe yarıçapı 5px. Ancak bu şekilde ihtiyacımızın yarıçapını da belirleyebiliriz. @ sınır yarıçapı (10 piksel); .

 div bölümü genişlik: 250 piksel; yükseklik: 250px; arkaplan rengi: #ccc; marj: 0 otomatik; -webkit-border-radius: 10px; -moz-sınır yarıçapı: 10px; -ms-border-radius: 10px; -o sınır yarıçapı: 10 piksel; sınır yarıçapı: 10px;  

Sonra, plan olarak kutuyu da döndüreceğiz. Compass ile yapmak gerçekten çok kolay, tek yapmamız gereken sadece dönüşüm yöntemini çağırmak;

 gövde background-color: # f3f3f3;  bölüm genişlik: 500 piksel; marj: 50 piksel otomatik 0; div genişlik: 250 piksel; yükseklik: 250px; arkaplan rengi: #ccc; marj: 0 otomatik; @ sınır yarıçapı (10 piksel); @ döndür döndürme;  

Bu Mixins ayrıca, sıkıcı satıcı öneklerini de üretecek ve rotasyon varsayılan olarak 45 derece alacaktır. Aşağıdaki oluşturulan CSS’ye bakın.

 div bölümü genişlik: 250 piksel; yükseklik: 250px; arkaplan rengi: #ccc; marj: 0 otomatik; -webkit-border-radius: 10px; -moz-sınır yarıçapı: 10px; -ms-border-radius: 10px; -o sınır yarıçapı: 10 piksel; sınır yarıçapı: 10px; -webkit-dönüşümü: döndürme (45deg); -moz-dönüşümü: döndürme (45deg); -ms-dönüşümü: döndürme (45deg); -o-dönüşümü: döndürme (45deg); dönüşümü: döndürme (45deg);  

Pusula yardımcıları

Pusula'daki en güçlü özelliklerden biri de Yardımcılar. Resmi siteye göre, Pusula yardımcıları, Sass tarafından sağlanan işlevleri artıran işlevlerdir.. Tamam, net bir görüntü elde etmek için aşağıdaki örneklere bir göz atalım.

@ Font yüz dosyaları ekleme

Bu örnekte, özel font ailesi ile ekleyeceğiz @ Font-face kural. Düz CSS3'te, kod dört farklı yazı tipinden oluşan aşağıdaki gibi görünebilir ve bazı insanlar için hatırlanması güçtür..

 @ font-face font-ailesi: "MyFont"; src: url ('/ fontlar / font.ttf') formatı ('truetype'), url ('/ fontlar / font.otf') formatı ('opentype'), url ('/ fonts / font.woff') formatı ('woff'), url ('/ fonts / font.eot') formatı ('gömülü opentype');  

Pusula ile ile aynı şeyi daha kolay yapabiliriz font-dosya () Yardımcılar;

 @ font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Yukarıdaki kod, ilk kod pasajı ile tamamen aynı bir sonuç üretecek, ayrıca yazı tipi türünü otomatik olarak algılayacak ve ekler. biçim() sözdizimi.

Ancak, koda yakından bakarsak, font yolunu eklemediğimizi göreceksiniz (/ Yazı /). Peki, Compass yazı tiplerinin nerede olduğunu nasıl bildin? Kafan karışmasın, bu yol aslında config.rb ile fonts_path mülkiyet;

 fonts_dir = "font" 

Diyelim ki değiştirelim diyelim. fonts_dir = "myfonts", o zaman oluşturulan kod url ( '/ MyFonts / font.ttf'). Varsayılan olarak, yolu belirlemediğimizde, Compass yönlendirecektir. stil / yazı tipleri.

Resim Eklemek

Başka bir örnek oluşturalım, bu kez bir resim ekleyeceğiz. CSS ile görüntü eklemek yaygın bir şeydir. Bunu genellikle kullanarak arka plan görüntüsü mülk, bunun gibi;

 div background-image: url ('/ img / the-image.png');  

Pusula'da kullanmak yerine url () fonksiyonu ile değiştirebiliriz Görüntü-url () Yardımcılar ve eklemeye benzer @ Font-face Yukarıdaki yolu tamamen görmezden gelebiliriz ve Compass'ın geri kalanı halletmesine izin verebiliriz..

Bu kod aynı zamanda ilk pasajdakiyle aynı CSS bildirimini de üretecektir..

 div background-image: görüntü url'si (the-image.png);  

Ek olarak, Compass ayrıca Image Dimension Helpers'a sahiptir, öncelikle görüntü genişliğini ve yüksekliğini algılar, bu nedenle ikisinin de CSS'mizde belirtilmesi gerektiğine göre, iki satır daha ekleyebiliriz;

 div background-image: image-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png");  

Çıktı böyle bir şey olacak;

 div background-image: url ('/ img / images.png? 1344774650'); genişlik: 80px; yükseklik: 80px;  

Daha fazla okuma: Pusula Yardımcısı İşlevleri

Son düşünce

Pekala, bugün Pusula hakkında oldukça fazla konuştuk ve gördüğünüz gibi gerçekten güçlü bir araç ve daha zarif bir şekilde CSS yazalım.

Ve zaten bildiğiniz gibi, Sass tek değil CSS Ön İşlemcisi; daha önce iyice tartıştığımız LESS de var. Bir sonraki yazıda, bu ikisinden birinin CSS önişlemesinde işi daha iyi yapan başa başa karşılaştırmaya çalışacağız.

• Kaynak İndir