sass'a başlarken

Değişkenler

Sık kullandığınız bir değer varsa onu bir değişkende saklayabilirsiniz. Örneğin, bunu renk şemalarını tanımlamak için kullanabilirsiniz. Şemanızı yalnızca bir kez tanımlamanız gerekir ve ardından bunu stil sayfalarınızda kullanabilirsiniz.

Bir değişkeni tanımlamak için adının önüne $ sembolü eklemelisiniz. (PHP’de yaptığınız gibi.)

Herhangi bir geçerli CSS özelliği değerini bir değişken içinde saklayabilirsiniz. Renkler, yazı tipleri veya URL’ler gibi.

Örnek 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

İçe aktarılıyor

Aşağıdaki senaryoyu varsayalım: İki stil sayfanız var: _variables.scss ve layout.scss. Mantıksal olarak, tüm değişkenlerinizi değişken stil sayfanızda tutarsınız ancak bunlara düzen stil sayfanızdan erişmek istersiniz.

NOT: Değişken stil sayfasının adından önce bir alt çizgi (’_’) olduğunu fark edebilirsiniz. Bunun nedeni kısmi olmasıdır - yani ithal edilecek.

sass-lang.com kısmi dosyalar hakkında şunları söylüyor: Diğer Sass dosyalarına dahil edebileceğiniz küçük CSS parçacıkları içeren kısmi Sass dosyaları oluşturabilirsiniz. Bu, CSS’nizi modülerleştirmenin ve işlerin bakımını kolaylaştırmanın harika bir yoludur. […] Alt çizgi, Sass’ın dosyanın yalnızca kısmi bir dosya olduğunu ve bir CSS dosyasında oluşturulmaması gerektiğini bilmesini sağlar. Sass kısmileri @import yönergesi ile kullanılır.

SCSS değişkenleri bu senaryo için harikadır. “_variables.scss” dosyanızın şöyle göründüğünü varsayalım:

$primary-color: #333;

Bunu @import ve ardından tırnak içinde stil sayfasının adı ile içe aktarabilirsiniz. Düzen stil sayfanız şimdi şöyle görünebilir (içeri aktarmada alt çizgi veya dosya uzantısı olmadığına dikkat edin):

@import 'variables';
body {
  color: $primary-color;
}

Bu, aşağıdaki gibi bir çıktı verir:

body {
  color: #333;
}

Yorumlar

SASS iki tür yorumu destekler:

  • Satır içi yorumlar - Bunlar yalnızca bir satıra yayılır ve genellikle bir değişkeni veya bloğu tanımlamak için kullanılır. Sözdizimi şu şekildedir: // Buradaki yorumunuz (çift eğik çizgiyle (//) başına eklersiniz ve satırın geri kalanı ayrıştırıcı tarafından yok sayılır.

  • Çok satırlı yorumlar - Bunlar birden çok satıra yayılır ve genellikle bir belgenin üstünde bir telif hakkı veya lisans görüntülemek için kullanılır. Çok satırlı bir yorum bloğunu /* ile açabilir ve çok satırlı bir yorum bloğunu */ ile kapatabilirsiniz. İşte bir örnek:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/

Yuvalama

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

çıktı

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

Kurmak

SASS’ı kullanmak söz konusu olduğunda, çalışma alanınızı kurmanın birden çok yolu vardır. Bazı insanlar komut satırı araçlarını (muhtemelen Linux çalışanları) kullanmayı, bazıları ise GUI uygulamalarını kullanmayı tercih eder. İkisini de kapatacağım.

Komut Satırı Araçları

‘sass-lang.com’ adresindeki ‘SASS’ı Kur’ sayfası bunu oldukça iyi kapsar. SASS’ı Ruby ile kullanabilirsiniz (bir Linux paket yöneticisinden kurulabilir veya Windows’ta yükleyiciyi indirebilirsiniz). macOS, Ruby önceden yüklenmiş olarak gelir.

Ruby’yi kurduktan sonra SASS’ı kurmanız gerekir (bazı durumlarda “sudo” gerekli olmayabilir):

sudo gem install sass

Son olarak, sass -v ile SASS’ı kurduğunuzu kontrol edebilirsiniz.

GUI Uygulamaları

Kullanabileceğiniz çok sayıda GUI Uygulaması olmasına rağmen, Scout-App öneririm. Dosya kaydetme sırasında CSS dosyalarınızı sizin için otomatik olarak oluşturur ve sıkıştırır ve macOS, Windows ve Linux’u destekler.

SCSS ve Sass →