Sass Tutorial Sass & Compass ile Çevrimiçi Bir VCard Oluşturun

Bugün Sass hakkındaki tartışmamıza devam edeceğiz ve bu Sass serimizin son bölümü olacak. Bu sefer, teorik bir yaklaşımdan ziyade, bu biraz daha pratik olacak. Compass ile birlikte Sass'ı kullanarak çevrimiçi bir vCard oluşturacağız.

Fikir, vCard'ın renk ve boyut için kolayca ayarlanabilir olması gerektiğidir. Bu süreçte Sass ve Compass gibi birkaç özellik kullanacağız. Değişkenler, Karışımlar, İşlemler, Seçiciler Kalıtım, İç İçe Kurallar ve Pusula yardımcıları. Bu serideki önceki yayınlarımızı kaçırdıysanız, devam etmeden önce bu yazılara bir göz atmanızı öneririz..

Planlama ve Tel Çekme

Sass ve Pusula ile çalışırken, planlama esastır. Genelde nihai sonucumuzun (ör. Sayfa veya web sitesi) nasıl olacağına dair büyük bir resme sahip olmalıyız. Fikir için Behance veya Dribbble gibi bazı sitelere göz atmak faydalı olacaktır. Fikirleri daha sonra kağıda yazabilir veya bir tel kafes içine yerleştirebiliriz, aşağıdaki örnekte olduğu gibi.

Yukarıdaki resimde görebileceğiniz gibi vCard'ımız iletişim bilgileri 'John' hakkında - bir resim profili, adı, e-posta adresi, telefon numarası ve kim olduğu ya da ne yaptığı hakkında kısa bir açıklama gibi John hakkında bazı bilgiler. Bu bizim 'biyo' bölümümüz olacak.

Aşağıda sosyal butonlar biçimindeki sosyal kimlikleri var. Bu bizim 'sosyal' bölümümüz olacak.

Varlıkların Hazırlanması

Kodlamaya başlamadan önce, hazırlanmak için bazı temel şartlar. Makinenizde Sass ve Compass yüklü olması gerektiğini anladım..

(Yükleyip yüklemediğinizden emin değilseniz, bu komutu çalıştırabilirsiniz. sass -v veya pusula -v vasitasiyla Komut İstemi veya Terminal veya bir GUI ile çalışmayı tercih ediyorsanız, Scout App gibi bir uygulamayı her zaman kullanabilirsiniz.

ModernPictograms gibi yerlerden alabileceğiniz font ikonları ve sosyal medya ikonları gibi bir takım varlıklara da ihtiyacımız olacak..

Son olarak, bu eğitim için Komut İstemi / Terminali kullandığımızdan, dizine gidip Compass projesini şu iki komutla çalıştırmamız gerekir: pusula girişi ve pusula izle.

HTML İşaretlemesi

Aşağıda vCard'ımızın HTML markasıdır, oldukça basittir. Tüm bölümler mantıksal HTML5 etiketi içine sarılır

      Thoriq Firdaus
 [email protected]
 (+62) 1.2345.678.9
 Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Suspendisse dolor neque, pellentesque quis'de eleifend, convallis amet tellus otur. Etiam ve auctor arcu.
 
 
 
   Facebook
  heyecan
 Google+
 Dribbble

Yukarıda gördüğünüz gibi, 'sosyal' alandaki sosyal kimliklerBölüm liste öğeleri içinde yapılandırılmıştır, böylece onları kolayca yan yana görüntüleyebiliriz. Her birine bu sözleşmeyi takip eden bir sınıf adı verilir. sosyal-facebook, sosyal-twitter, sosyal-google ve bunun gibi.

Pusula Yapılandırması

Compass'ı biraz yapılandırmak zorundayız. config.rb aşağıdaki gibi dosya:

 # Tercih ettiğiniz çıktı stilini burada seçebilirsiniz (komut satırı üzerinden geçersiz kılınabilir): output_style =: widthed Pusula yardımcı işlevleriyle varlıklara göreceli yolları etkinleştirmek için. Uncomment: relat_assets = true # Seçicilerinizin orijinal konumunu görüntüleyen hata ayıklama yorumlarını devre dışı bırakmak için. Uncomment: line_comments = yanlış

Bulamazsanız config.rb Dosya, muhtemelen bu komutu çalıştırmadınız pusula girişi proje dizininizde.

Dosyaları İçe Aktarma

Compass kullanacağımız için onu kullanarak içe aktarmamız gerekiyor;

 @import "pusula";

Çıktıların daha tutarlı hale getirilmesi için varsayılan stilleri tarayıcılardan sıfırlamak benim kişisel tercihim. Pusula, bu durumda, bir Reset modülüne sahiptir. Bu modül Eric Meyer'in CSS sıfırlamasına dayanmaktadır ve şu şekilde içe aktarılabilir;

 @import "pusula / sıfırlama";

Ancak, ben normalize kullanarak minnetle kullanmayı tercih ayrıca Sass / Scss formatında geliyor. Dosyayı buradan indirin, içine kaydedin şımarıklık çalışma dizini ve stil sayfamıza aktarın.

 @import "normalize";

Önerilen Kaynaklar: CSS Stili Öncelik Seviyesini Gözden Geçirme

Değişkenler

Stil sayfasında kesinlikle birkaç sabit değere sahip olacağız, bu yüzden onları değişkenlere koyacağız ve aşağıdaki bu iki değişken vCard'ımızın temel rengini tanımlayacaktır..

 $ base: #fff; $ koyu: koyu ($ taban,% 10);

İken $ genişliği Aşağıdaki değişken sayfamızın genişliği olacak; aynı zamanda diğer eleman boyutlarını tanımlamanın temelini oluşturur..

 $ genişlik: 500px; $ boşluk: $ genişlik / 25; // = 20px

Ve $ uzay gördüğünüz gibi değişken, vCard'ımızdaki varsayılan boşluk veya sütun boyutu olacaktır; bu örnekte 20px;

Compass ayrıca, görüntü boyutunu tespit etmek için Yardımcılara sahiptir ve bu özelliği resim profilimizde aşağıdaki şekilde kullanacağız;

 $ img: resim genişliği ("me.jpg") + (($ boşluk / 4) * 2);

Ekstra İlave arasında (($ boşluk / 4) * 2) Yukarıdaki kodda, resmi çerçeveleyen kenarlık da dahil olmak üzere toplam görüntü genişliğini hesaplamaktır. Bir çerçevenin genellikle iki yüzü vardır; üst ve alt / sol ve sağ, Bu yüzden çarpıyoruz. bölünme sonucu tarafından 2.

Seçici Miras

Görünüşe göre, stil sayfamızda aynı stillendirme kurallarına sahip birkaç seçici var. Kodumuzda tekrar etmemek için, bu stilleri ilk etapta belirtmemiz ve bunları @extend gerektiğinde direktif. Bu yöntem, Sass'ta olarak bilinir. Seçici Miras, LESS'te eksik olan çok kullanışlı bir özellik.

 .şamandıra-sola float: sola;  .box-sizing @include box-sizeing (sınır kutusu);

stiller

Gerekli olan her şey yapıldığında, HTML belgemize arkaplan rengi ile başlayarak vCard'ımızı biçimlendirme zamanı geldi;

 html yükseklik:% 100; arka plan rengi: $ baz;

vCard

Aşağıdaki stiller vCard sarıcısını tanımlar. Daha önce LESS ile çalışıyorsanız, bu kod size tanıdık gelecektir ve sindirimi kolay olacaktır.

 .vcard width: $ width; marj: 50 piksel otomatik; arkaplan rengi: koyu ($ taban,% 5); sınır: 1px katı $ karanlık; @ sınır yarıçapı dahil (3px); ul dolgu maddesi: 0; marj: 0; li list-style: yok;

Paket genişliği, değeri $ genişliği değişken. Arka plan rengi daha koyu % 5 temel renkten kenarlık rengi daha koyu olurken % 10. Bu renklendirme Sass renk fonksiyonları kullanılarak elde edilir.

VCard ayrıca 3px Compass CSS3 Mixins kullanılarak elde edilen yuvarlatılmış köşeler yarıçapı; Çerçeve içinde (3 piksellik).

Biyo Bölüm

Bu rehberin başlarında da belirttiğimiz gibi vCard iki bölüme ayrılabilir. Aşağıdaki iç içe stiller, birkaç profil içeren resim profilini içeren ilk bölümü (ad, e-posta ve telefon) tanımlayacaktır..

 .biyo sınır-alt: 1 piksel katı $ karanlık; dolgu: $ boşluk; @extend .box-sizeing; img @extend .float-left; Ekran bloğu; kenarlık: ($ boşluk / 4) katı #ffffff;  .detail @extend .float-left; @extend .box-sizeing; renk: koyu ($ taban,% 50); marj: left: $ space; alt: $ boşluk / 2;  width: $ width - (($ boşluk * 3) + $ img); li &: before width: $ space; yükseklik: $ boşluk; marj-sağ: $ boşluk; font-family: "ModernPictogramsNormal";  & .name: önce content: "f";  & .email: önce content: "m";  & .phone: önce content: "N";

Yukarıdaki koddan bir haber almanız gerektiğini düşündüğümüz bir şey var. Genişliği .detay seçici bu denklem ile belirtildi $ genişlik - (($ boşluk * 3) + $ img);.

Bu denklem, ayrıntının dinamik olarak hesaplanması için kullanılır. Genişlik resim profili genişliğini ve boşlukları (dolgu ve kenar boşluğu) vCard toplam genişliğinden çıkararak.

Sosyal Bölüm

Aşağıdaki stiller, vCard'daki ikinci bölüm içindir. Burada aslında düz CSS ile hiçbir fark yoktur, sadece şimdi iç içe geçmişlerdir ve değişkenlerle birlikte birkaç değer tanımlanmıştır..

 .sosyal background-color: $ karanlık; genişlik:% 100; dolgu: $ boşluk; @extend .box-sizeing; ul text-align: center; li ekran: satır içi blok; genişlik: 32px; yükseklik: 32px; bir text-decoration: none; ekran: satır içi blok; genişlik:% 100; yükseklik:% 100; metin girintisi:% 100; beyaz boşluk: nowrap; taşma: gizli;

Bu bölümde, resim sprite tekniğini kullanarak sosyal medya simgelerini göstereceğiz ve Compass bu işi daha hızlı yapma özelliğine sahip.

Öncelikle, simgelerimizi özel bir klasöre koymamız gerekiyor - hadi klasörü isimlendirelim. /sosyal/, Örneğin. Stil sayfasına geri döndüğünüzde, bu simgelerle aşağıdakileri birleştirin: @ithalat kural.

 @import "social / *. png";

sosyal/ Yukarıdaki simgeler simgelerin bulunduğu klasöre bakın. Bu klasör resim klasörünün içine yerleştirilmelidir. Şimdi, resim klasörümüze bakarsak, rastgele karakterlerle oluşturulmuş sprite bir resim görmeliyiz. sosyal-sc805f18607.png. Bu noktada, stilleri aşağıdaki satırda uygulayana kadar ön uçta hiçbir şey olmuyor..

 @ tüm-sosyal-sprite dahil;

Son sonuç

Son olarak, tüm sıkı çalışmalardan sonra artık şu sonucu görebiliriz:

Düşündüğümüzde diye 500px daha sonradan çok geniş, yalnızca içindeki değeri değiştirmemiz gerekiyor $ genişliği değişken - örneğin, 350px - Gerisi olacak “sihirle” Düzeltilebilir. Ayrıca renk değişkeni ile deneme yapabilirsiniz.

Demoyu Gör
Kaynak İndir

Sonuç

Bu derste size Sass ve Compass ile basit bir çevrimiçi vCard'ın nasıl oluşturulacağını gösterdik; Ancak bu sadece bir örnek. Sass ve Pusula gerçekten güçlüdür, ancak bazen gerekli değildir. Örneğin, birkaç sayfadan oluşan bir web sitesinde çalışırken ve muhtemelen sadece daha az stil satırına ihtiyaç duyacak olursak, Sass ve Compass'ı kullanmak aşırı kabul edilir..

Bu yazı Sass serimizi kapatıyor ve umarız beğenmişsinizdir. Bu konuyla ilgili herhangi bir sorunuz varsa, aşağıdaki yorum kutusuna eklemek için tereddüt etmeyin.