Sas nedir? Bu CSS Uzantı Dilini Nasıl Kullanacağınızı Öğrenin

Sözdizimsel olarak harika stil sayfaları (Sass), popüler bir CSS uzantı dilidir. Dil yaklaşık 15 yıldır varlığını sürdürmektedir. Bootstrap'tan Foundation'a kadar her CSS kitaplığı ve çerçevesiyle uyumlu hale getirerek, CSS'nin her sürümüyle iyi çalışır.

Dil, Sass kodu yazmanıza ve ardından bu kodu CSS'ye derlemenize izin verir. Düz CSS yerine Sass kullanmanın değeri, şu anda CSS kapsamı dışında olan ek özellikler sağlamasıdır.

Bu eğitimde Sass'ı ve en önemli özelliklerini nasıl kullanacağınızı öğreneceksiniz.

Sass Kurulumu

Cihazınızda Sass'ı kullanmanın birkaç yolu vardır. Bunlar, bir uygulamayı (LiveReload veya Scout-App gibi) çalıştırmayı, indirmeyi içerir. GitHub'dan Sassveya yükleme npm kullanarak.

npm ile Sass Kurulumu

Sass'ı npm kullanarak kurmak için yapmanız gerekenler NodeJS ve npm'yi kurun cihazınızda. O zaman bir oluşturmanız gerekecek paket.json dosya (projelerinize herhangi bir npm paketi kurarken iyi bir uygulamadır). Temel oluşturabilirsiniz paket.json proje dizininizde aşağıdaki terminal komutuyla dosya oluşturun:

npm başlangıç ​​-y

Bu komutu yürütmek, aşağıdaki içeriğe sahip bir package.json dosyası oluşturacaktır:

{
 "ad": "my_app",
 "sürüm": "1.0.0",
 "tanım": "",
 "ana": "index.js",
 "Kodlar": {
 "test": "echo \"Hata: test belirtilmedi\" && çıkış 1"
 },
 "anahtar kelimeler": [],
 "yazar": "",
 "lisans": "ISC"
}

bu paket.json file önemlidir çünkü projeniz için yapılandırma görevi görür. Her yeni npm paketi kurduğunuzda, paket.json dosya bunu yansıtacaktır.

Artık aşağıdaki komutu terminalinize ekleyerek Sass'ı kurabilirsiniz:

npm kurulum sass

Bu komut, paket.json yeni bir dosya oluşturarak bağımlılık alanı, yeni Sass paketini içerecek. Aynı zamanda yeni bir paket kilidi.json dosya ve sass (artı bağımlılıklar) yükleyin node_modules dizin.

Sass Dosyasının Farklı Türleri

Bir Sass dosyası iki uzantıdan birine sahip olabilir, .sass veya .scss. Aralarındaki temel fark, .scss dosyasında küme parantezleri ve noktalı virgüller (CSS gibi) kullanılırken, .sass dosya yapıları CSS'yi girinti kullanarak (Python gibi) kullanır. Bazı geliştiriciler aşağıdakileri kullanmayı tercih eder: .scss file yapısı CSS'ye daha yakın olduğu için.

Bir .scss Dosya Örneği

$birincil renk: mavi;
gövde {
 renk: $birincil renk;
 P {
 kırmızı renk;
 }
}

Bir .sass Dosya Örneği

$birincil renk: mavi
gövde
 renk: $birincil renk
 P
 kırmızı renk

Bir Sass Dosyasını CSS'ye Derlemek

kullanarak bireysel bir Sass dosyası derleyebilirsiniz. küstah komut satırı programı:

sass file.scss > file.css

Ayrıca, belirli bir dizindeki tüm dosyalarda sass çalıştırabilirsiniz:

sass scss: dist/css/

Bu komut, içindeki tüm Sass dosyalarını derler. scss dizini ve elde edilen dosyaları içinde saklar dist/css.

npm kullanıyorsanız, aşağıdakileri kullanarak sass derlemesi için uygun bir kısayol ayarlayabilirsiniz. Kodlar senin alan paket.json dosya:

"Kodlar": {
 "test": "echo \"Hata: test belirtilmedi\" && çıkış 1",
 "sass": "sass --watch scss: dist/css/"
 },

Bu yapılandırma, --kol saati seçenek. Sass'ı çalışır durumda tutar ve bu dosyaları değiştiklerinde yeniden derlemesini sağlar. Her dosya için sass bir .css ve bir .css.harita dosya.

Yukarıdaki Sass komut dosyasını çalıştırmak için terminalinizde aşağıdaki komutu çalıştırmanız gerekir:

npm sass'ı çalıştır

Bu komutu çalıştırmak şuna benzer bir çıktı üretecektir:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
scss\main.scss dosyası dist\css\main.css dosyasına derlendi.
Sass değişiklikleri izliyor. Durdurmak için Ctrl-C'ye basın.

Sas Değişkenleri

Bugün CSS'de değişkenler oluşturabilirsiniz, ancak 15 yıl önce CSS değişkenleri yoktu, bu yüzden onlar için Sass desteği değerliydi. Sass değişkenleri, CSS değişkenlerinin yaptığı gibi çalışır. Bir CSS dosyası boyunca kullanmayı düşündüğünüz değerleri (renkler gibi) depolarlar. Değişkenlerin ana faydalarından biri, bir değerin birçok oluşumunu tek bir yerde değiştirerek güncellemenize izin vermeleridir.

Her Sass değişkeni dolar işaretiyle başlar ve ardından herhangi bir karakter kombinasyonu gelir. Değişkenlerinizi aşağıdaki gibi açıklayıcı hale getirmeye çalışın. $birincil renk yukarıdaki örnek. Bir Sass değişkeninin CSS değişkenlerinde derlenmediğini unutmamak önemlidir. Örneğin, bu .scss dosyası:

$birincil renk: mavi;
gövde {
 renk: $birincil renk;
}

Aşağıdaki CSS'ye derlenecek:

gövde {
 renk: mavi;
}

Yukarıdaki dosyadan da görebileceğiniz gibi CSS değişkeni yok. Değişkenlerin avantajı, Sass dosyasında yapılan herhangi bir değişikliğin ilgili CSS dosyasını güncellemesidir.

Sass Karışımları

Projeniz boyunca birkaç kez kullanmak istediğiniz bir mülkünüz varsa, bir değişken harikadır. Ancak, bir birim olarak kullanmak istediğiniz bir grup özelliğiniz varsa, bir karışım hile yapacaktır.

Her mixin ile başlar @mixin anahtar kelime, ardından karışıma atamak istediğiniz ad. Değişkenleri karışıma parametre olarak geçirme ve bu değişkenleri bir işlevle aynı şekilde karışımın gövdesi içinde kullanma seçeneğiniz vardır.

Bir Karışım Kullanmak

@mixin light-theme($birincil renk: beyaz, $ikincil renk: #2c2c2c) {
 font ailesi: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 arka plan rengi: $birincil renk;
 renk: $ikincil renk;
}
#ev {
 @include açık tema (mavi);
}

Yukarıdaki kodda fark edebileceğiniz ilk şey, mixin'in iki argümanı kabul etmesidir. Argümanlara varsayılan değerler atayabilir ve eklediğinizde bunları geçersiz kılabilirsiniz.

Mixin'inizi oluşturduktan sonra, web sitenizin herhangi bir bölümünde aşağıdakileri kullanarak kullanabilirsiniz: @Dahil etmek anahtar kelime ve ardından karışımın adı.

Yukarıdaki Sass kodunu derlemek, hedef dosyanızda aşağıdaki CSS kodunu oluşturacaktır:

#ev {
 font ailesi: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 arka plan rengi: mavi;
 renk: #2c2c2c;
}

Sass Fonksiyonları

Farklı anahtar kelimelerin yanı sıra, bir işlev ile bir karıştırma arasındaki temel fark, bir işlevin bir şey döndürmesi gerektiğidir. Değerleri hesaplamak veya işlemleri gerçekleştirmek için Sass fonksiyonlarını kullanabilirsiniz.

@function eklenti numaraları($sayı-bir, $sayı-iki){
 $toplam: 0;
 $toplam: $sayı-bir + $sayı-iki;
 @dönüş $toplam 
}

Yukarıdaki bu işlev iki sayıyı kabul eder ve toplamlarını döndürür. Sass işlevleri, döngüler için if deyimleri ve diğer kontrol akışı deyimlerini bile içerebilir.

Sass Modülleri

Tüm değişkenlerinizi, karışımlarınızı ve işlevlerinizi aynı dosyaya dahil etmeniz gerekseydi, büyük uygulamalar oluştururken devasa bir Sass dosyanız olurdu. Modüller, büyük dosyaları derleme sırasında birleştiren daha küçük dosyalara bölmek için bir yol sağlar. Örneğin, bir işlev modülünüz ve bir karıştırma modülünüz olabilir, tek hatırlamanız gereken @kullanmak anahtar kelime.

Önceki karışımı kendi dosyasına nasıl ayırabileceğinizi gösteren bir örnek:

mixins.scss Dosyası

@mixin light-theme($birincil renk: beyaz, $ikincil renk: #2c2c2c) {
 font ailesi: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 arka plan rengi: $birincil renk;
 renk: $ikincil renk;
}

main.scss Dosyası

@'karışımları' kullanın;
#ev{
 @include mixins.light-teması;
}

Harici bir dosyayı modül olarak içe aktarmak ve kullanmak için, @kullanmak içe aktarmak için anahtar kelime. Ardından, içe aktarılan dosyadan belirli bir karışımı kullanmak için, belirli bir karıştırma adının önüne dosya adını ve ardından bir nokta ekleyin. Yukarıdaki dosyaların derlenmesi aşağıdaki CSS kodunu üretecektir:

#ev {
 font ailesi: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 arka plan rengi: beyaz;
 renk: #2c2c2c;
}

CSS'nizi Genişletmek ve Düzenlemek için Sass'ı Kullanın

Sass, CSS'nin sözdiziminin bir uzantısıdır. Stil sayfalarınızı düzene koymanıza ve daha verimli bir şekilde yönetmenize olanak tanır. Ancak etkili tasarımlar oluşturmak için yine de CSS ve web tasarım ilkelerine hakim olmanız gerekir.

Bu makale size Sass'ı nasıl kuracağınızı ve kullanacağınızı öğretir. Sass değişkenlerini, karışımlarını, işlevlerini ve modüllerini nasıl oluşturacağınızı öğrendiniz. Artık tek yapmanız gereken bir HTML belgesi oluşturmak ve Sass kodunuzun hayata geçmesini izlemek.

Her Geliştiricinin Bilmesi Gereken 8 Temel CSS İpuçları ve Püf Noktaları

Sonrakini Oku

Yazar hakkında