CSS için SASS ile başlamak için bir Giriş Kılavuzu

SASS ve LESS , değişkenlerle birlikte bir tür ön CSS kodu olan CSS kodunu yazmak için iki benzer araçtır – bu daha sonra iyi ole normal CSS koduna dönüştürülür.

Bunları neden kullanmak isteyeceğiniz gerçekten iş akışınıza bağlıdır, daha küçük ölçekli işler ve küçük CSS güncellemeleri için muhtemelen gerekli değildir, ancak orta büyüklükteki yeni projeler ve ekip işbirliğini içeren işler için faydaları belirgin hale geliyor.

SASS'de çalışırken, CSS'yi aynı şekilde yazarsınız, ancak CSS'deki değişkenleri ayarlayarak ve kullanarak, daha sonra SASS olan bu formatı CSS'ye yeniden derler veya dönüştürürsünüz.

Yapmanız gereken ilk şey, Ruby'nin üzerinde çalışan SASS'ı kurmaktır, yapılacak ikinci şey, kod ipuçları ve kod tamamlama konusunda yardımcı olabilecek SASS için metin düzenleyicinizden destek almaktır.

Birkaç popüler metin düzenleyicisi, Sublime Text ve TextMate, tüm kod tamamlama işlemlerini yapmak için yüklenebilecek bir pakete sahiptir – bunu sıralamak için buradaki talimatları izleyin.

Başlangıç ​​blokları yerindeyken, değişkenler, iç içe stiller, karışımlar ve sayısal operatörlerle SASS'ta neler yapabileceğimize bakalım.

SASS klasörünü izlemek

SASS'ı başarıyla yükledikten sonra, üzerinde çalışacağınız bir dizin oluşturun, .scss son eki ile istediğiniz gibi bir dosya oluşturun ve komut satırında bir komut vererek klasörü izleyin, bu yüzden benim örneğimde bir ana klasörümde sass adlı bir klasör var ve oradan tüm .scss dosyaları, onları her kaydettiğimde normal .css dosyalarına dönüştürülecek, yani Terminal türünden:

 sass --izle ~/sass/

 [e-posta korumalı][~/sass]: sass --watch sass/
>>> Sass değişiklikleri izliyor. Durdurmak için Ctrl-C'ye basın.

Değişkenler

Değişkenler, yalnızca daha sonra CSS kodunda yeniden kullanılabilen 1 değer kümesini kullanan yer tutuculardır.

Değişkenler, SASS'ta $ öneki ile bildirilir ve ardından değişken adı, ardından iki nokta üst üste, ardından değer ve noktalı virgül ile tamamlanır ve normal CSS tanımlarına çok benzer, ancak küme parantezleri olmadan. Değişken adı bir harf veya alt çizgi ile başlayabilir, ancak bir sayı ile başlamaz, ancak sayılar içerebilir . Aşağıdaki örneklerde kullanılan değişkenler, Javascript'te değişken tanımlarıyla çalışmanın tercih edilen bir yolu olan deve durumunda biçimlendirilmiştir, sonraki kelimeler ilk büyük harfle başlar.

Değişkenler, CSS'de ihtiyacınız olan hemen hemen her şeyi içerebilir ve bunları şu şekilde bildirebilirsiniz:

 /*Değişkenler .scss*/

$myColor:#545445; // Tek CSS Değeri
$myOtherColor:#999; // Tek CSS Değeri
$myMargin:0 otomatik; // Birden çok değer
$myBorder:2px sabit #999; // Birden çok değer
$myContentAfter:" bundan sonra gelir" // Sözde seçici

Yukarıda, tekli veya çoklu CSS değerlerine ve hatta sözde öncesi ve sonrası öğelerine nasıl sahip olabileceğinizi görüyorsunuz.

Değişkenleri ayarladıktan sonra, bunları CSS kodunda şu şekilde kullanabilirsiniz:

 /*Değişkenler .scss*/

div h2 {
 renk: $myColor;
}
P {
 renk:$myOtherColor;
}
ul {
 renk:$benimRenk;
}
başlık {
 sınır:$myBorder;
 marj:$myMargin;
}
başlık::sonra{
 içerik:$myContentAfter;
}

.scss belgenizi her kaydettiğinizde SASS, başlangıçta .css uzantılı benzer bir adlandırılmış dosya oluşturur ve .scss dosyanızda yaptığınız her kaydetmede onu günceller, sözdiziminizde bir hata yaparsanız hata mesajını alırsınız. .css dosyası.
Yani yukarıdaki dosya kaydedildiğinde, aşağıdaki .css dosyasının içeriği olacaktır.

 /*Değişkenler .css*/

div h2 {
  renk: #545454; }

P {
  renk: #666666; }

ul {
  renk: #545454; }

başlık {
  kenarlık: 2 piksel katı #999999;
  kenar boşluğu: kenar boşluğu otomatik; }

başlık::sonra {
  içerik: " bundan sonra gelir"; }

İç İçe Stiller

İç içe stiller bir bakıma Medya Sorguları gibidir, ancak bir görüntü alanı boyutunu hedeflemek yerine bir öğeyi hedefler ve bu öğeye stiller uygularsınız.

Örneğin aşağıdaki kod bloğunu alın:

 /*İç içe stiller .scss*/

.içerik {
yazı tipi ailesi:Times,sans-serif;
p {font-family:Helvetica,serif;}
bir {renk:#565656; &:hover{color:#8888;}}
}

Hedef, .content adlı bir sınıftır ve ilk satırın üzerinde font-ailesini bildirdiği gibi kendisine uygulanan normal stiller olabilir – ancak daha sonra p için iç içe stiller ve kendi stillerini ancak dış sınıf içinde bildiren öğelere sahiptir. stil.

Ayrıca sözde vurgulu öğenin a öğesine bir ve işaretiyle eklendiğine ve stilinin .content öğesinde yuvalanmış a öğesinde daha fazla iç içe geçmiş olduğuna dikkat edin. Rus bebeklerini düşünün. Bu, CSS dosyasında şöyle çevrilir:

 /*İç İçe Stiller .css*/

.içerik {
  yazı tipi ailesi: Times, sans-serif; }
  .içerik p {
    yazı tipi ailesi: Helvetica, serif; }
  .içerik bir {
    renk: #565656; }
    .content a:hover {
      renk: #8888; }

karışımlar

Mixins kulağa ısırmasından çok daha kötü geliyor – Mixins sadece başka bir değişken türüdür, temel olarak bir sınıf türünde bir grup stil bildirirsiniz ve bunları daha sonra yalnızca ilk yer tutucu adını kullanarak başka bir stil grubunda yeniden kullanırsınız.

Yani bir Mixin bildirmek, @mixin artı yer tutucu adını kullanmaktır, bir tür sınıf gibi ama nokta ön eki yoktur.

 /*Mixins .scss*/

@mixin myBorder {
	dolgu: 0 1%;
	kenar boşluğu: 30 piksel %2;
}

Mixin'i daha sonra .scss dosyasında @include ve yer tutucu adını kullanarak yeniden kullanın – yine başta nokta olmadan .

 /*Mixins .scss*/

.mysuperblockotext {
	yazı tipi ailesi: Arial, sans-serif;
	yazı tipi boyutu: 1rem;
	@include myBorder;
}

Bu, .css dosyasında şu şekilde çevrilecektir:

 /* Mixins .css*/

.mysuperblockotext {
  yazı tipi ailesi: Arial, sans-serif;
  yazı tipi boyutu: 1rem;
  dolgu: 0 1%;
  kenar boşluğu: 30 piksel %2; }

Sayısal Operatörler

SASS'de toplama, çıkarma, çarpma ve bölme için temel + – * ve / sembollerini kullanabilirsiniz.

 /* Sayısal Operatörler .scss*/

$fontBlock:12px;

.myfonts {
	yazı tipi boyutu:$fontBlock +2;
}

Burada ilk önce bir $fontblock değişkeni bildiriyoruz ve ona 12px değerini veriyoruz, ardından bir .myfonts sınıfı oluşturup değişkeni 2'şer artırarak bildirdikten sonra, SASS doğru ölçümde artış yapacak kadar akıllı.

 /* Sayısal Operatörler .scss*/

$genelDoldurma:%2;

.thinpad {
	dolgu:$genelDoldurma /2;
}

İkinci örnekte yine başlangıçta bir değişken bildirilir ve dolguyu ikiye bölen sayısal bir operatörle yeni bir sınıf oluşturulur.
Bu iki örnek daha sonra .css dosyasında şu şekilde derlenecektir:

 /* Sayısal Operatörler .css*/

.myfonts {
  yazı tipi boyutu: 14 piksel; }

.thinpad {
  dolgu: %1; }

İşte bu – SASS'ta bir başlangıç