Sass Kurulumu ve Temel Prensiplere Başlarken
Bu yazıda, Sass veya denilen bir CSS Ön İşlemcisi tartışacağız. Sözdizimsel Müthiş Stil Sayfaları.
LESS hakkındaki önceki yayınlarımızı takip ediyorsanız, bu konu hakkında bilgi sahibi olduğunuzdan eminiz. CSS Ön İşlemcisi. Hem Sass hem de LESS, Değişkenler, Karışımlar ve İşlevler gibi programlama dillerini kullanarak temel olarak statik-statik CSS oluşturma biçimimizi genişleten CSS Ön İşlemcileridir..
Sass Kurulumu
Sass'ı oluşturmadan önce kurmamız gerekiyor.. Sass Ruby üzerine inşa edilmiştir. Bir Mac üzerinde çalışıyorsanız, olasılıklar Ruby zaten kuruludur. Ruby'yi Windows'a kurabilirseniz, bu Ruby Installer'ı kullanın..
Yükleme tamamlandıktan sonra, Terminal'e (Mac'te) veya Komut İstemi'nde (Windows'ta) gidebilir ve içine aşağıdaki komut satırını yazabilirsiniz:
Mac’te;
sudo gem yüklemek sass
Windows'ta;
gem sass yüklemek
Yükleme başarılı olursa, Terminal / Komut İsteminizde aşağıdaki bildirime sahip olacaksınız..
Daha sonra, aşağıdaki komutu kullanarak Sass'ın hangi dizini izleyeceğini seçmemiz gerekir;
sass - saat yolu / sass dizini
Yukarıdaki komut satırı her izleyecektir .SCSS/.şımarıklık içindeki dosyalar yol / dizin ve bu dizindeki dosyalardan biri değiştirildiğinde, Sass ilgili dosyaları güncelleyecek ya da yoksa bir tane oluşturacaktır..
Dosyaları belirli bir dizinde oluşturmak için Sass'a ihtiyacımız olursa, bu şekilde yapabiliriz;
sass - saat yolu / sass dizini: yol / css dizini
Bu komut satırıyla, dizin yerine belirli bir dosyayı da izleyebiliriz;
sass - saat yolu / sass dizini / styles.css
Watch komutu başarılı olursa Terminal / Komut İsteminizde aşağıdaki bildirim gibi bir şey görünecektir.
Daha fazla okuma: Sass 3 ile otomatik derleme Sass dosyaları
Sass Uygulamaları
Bununla birlikte, Terminal veya Komut İstemi üzerinden çalışmaktan nefret ediyorsanız, Sass için bazı uygulamaları kullanabilirsiniz. Ücretsiz seçenek Scout; Adobe Air üzerine kuruludur, böylece tüm işletim sistemlerinde çalıştırılabilir (Windows, OSX ve Linux).
Ancak, bazılarının daha önce bildirdiği gibi çok yavaş çalışıyor.
Öyleyse sabrınız yoksa, bazı ücretli seçenekler de var. Her uygulama için fiyat değişiyor, Compass.app 10 $, Fire.app, 14 $ ve Codekit 25 $ için de geçerli.
Kod Vurgulama
Sass, öncelikle bir CSS uzantısı olsa da, geçerli düzenleyiciniz sözdizimini doğru şekilde vurgulayamayabilir. Neyse ki, hemen hemen her kod düzenleyicinin etkinleştirmesi için bazı paketler var. .şımarıklık veya .SCSS kod vurgulama.
Benim gibi Sublime Text 2 ile çalışıyorsanız, bu paketleri kullanabilirsiniz; Sublime Text HAML & Sass ve Sublime Text 2 Sass Package ve daha kolay bir yol için, bu paketlerden birini Package Control ile yükleyebilirsiniz..
Diğer kod editörleri için aşağıya bakın veya Google Googling’i deneyin..
- Bu, Dreamweaver ile Sass üzerinde çalışmak için harika bir senaryo öğretici.
- Koda için Sass Modu. Ancak, bu modun sürüm 2'den itibaren Coda ile entegre olduğu görünüyor
- TextMate Resmi SCSS Paketi
- Sass için Espresso Şeker
- InType Paketleri
Sass dili
Sass ve LESS, bazı ortak dilleri paylaşıyor, altlarında bazıları.
Değişkenler
$ renk tabanı: # 000; $ genişlik: 100 piksel;
LESS değişkenlerinden tek farkı, Sass değişkenindeki değişkenin bir ile tanımlanmış olmasıdır. $ işaret.
Yerleştirme Kuralları
başlık genişlik: 980 piksel; yükseklik: 80px; nav ul list tarzı: yok; dolgu: yok; marj: yok; li ekran: satır içi; bir text-decoration: none;
Karışımlar ve İşlevler
@mixin sınır yarıçapı ($ yarıçapı) -moz-border-radius: $ yarıçapı; -webkit-border-radius: $ yarıçapı; -ms-border-radius: $ yarıçapı; sınır yarıçapı: $ yarıçapı;
Operasyonlar
li genişlik: $ genişlik / 5 - 10 piksel;
Koşullu İfade
@ hafiflik ($ renk tabanı)> =% 51 arka plan rengi: # 333333; @else background-color: #ffffff;
LESS'te, bu derste ele aldığımız Guard ifadesiyle benzer bir şey yapabilirsiniz..
Son düşünce
Ve bu kadar. Bir sonraki yazıda, Sass dillerini ve onun arkadaşı Compass'ı keşfetmeye başlayacağız. Bizi izlemeye devam edin.
